:root {
  color-scheme: dark;
  font-family: "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --hud-control-surface: rgba(17, 28, 31, .92);
  --hud-control-border: rgba(151, 177, 164, .52);
  --hud-control-text: #eef0e8;
  --pack-surface: rgba(11, 20, 22, .97);
  --pack-raised: #172628;
  --pack-rule: rgba(151, 177, 164, .26);
  --pack-muted: #abb8b1;
  --pack-accent: #e0a24b;
  --pack-capacity: #8fc6ad;
  --panel-edge: rgba(151, 177, 164, .38);
  --panel-radius: 8px;
}

* { box-sizing: border-box; }
.player-day-reveal {
  position: fixed; inset: 0; z-index: 100000; background: #000;
  display: grid; place-items: center; padding: 8vw; color: #eef0e8;
  font: 600 clamp(2rem, 7vw, 7rem)/1.15 "Avenir Next Condensed", "Arial Narrow", sans-serif;
  text-align: center; letter-spacing: .12em; overflow-wrap: anywhere;
}
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #111821; }
body { color: #eef0e8; user-select: none; }
#world, #world canvas { width: 100%; height: 100%; display: block; touch-action: none; }
#world canvas {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='2.5' fill='%23eef0e8' stroke='%23111821' stroke-width='1.5'/%3E%3C/svg%3E") 6 6, crosshair;
}
html.wonder-mouse-looking, html.wonder-mouse-looking * { cursor: none !important; }
/* HUD off from Pause (card dbb4e177): panels, Pause, the action cross and messages stay; touch keeps its Pause button. */
body.wonder-hud-off :is(.identity, #home-world-label, #home-compass, #action-hints, #action-focus, #home-reticle,
  #build-version, #vehicle-fuel-gauge, #god-mode-hud, #land-cover-hud, .hud-buttons > :not(#pause-toggle)) { display: none !important; }
html:not([data-input-device="touch"]) body.wonder-hud-off #pause-toggle { display: none !important; }
/* The pointer hides once the controller is in use and returns when the mouse moves (Rob, 25 September 2026). */
html[data-input-device="pad"], html[data-input-device="pad"] * { cursor: none !important; }
#world.first-day-world-hidden { visibility: hidden; }
body.wonder-hud-hidden > :not(#world):not(#start-surface):not(#hud-visibility-toggle):not(#memory-journal):not(#navigation-panel):not(#people-panel):not(#build-version):not(#diagnostics-panel):not(#pause-menu):not(.hud-buttons):not(.notebook-panel):not(.clue-panel):not(.world-title) {
  display: none !important;
}

.notebook-panel {
  position: fixed; z-index: 72; top: max(12px, env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%); width: min(540px, calc(100% - 24px));
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; padding: 18px;
  border: 1px solid #6d8376; border-radius: 8px; background: #17231f; color: #eef0e8;
  box-shadow: 0 12px 40px #0008; user-select: text;
}
.notebook-panel[hidden], .notebook-panel [hidden] { display: none !important; }
.notebook-panel h2 { margin: 0 0 12px; font-size: 22px; letter-spacing: .08em; }
.notebook-panel button {
  min-height: 44px; padding: 9px 12px; margin: 3px; border: 1px solid #708778;
  border-radius: 4px; background: #293d33; color: inherit; font: inherit; font-size: 16px; cursor: pointer;
}
.notebook-panel button:disabled { opacity: .5; cursor: default; }
.notebook-panel :focus-visible { outline: 2px solid #f0d693; outline-offset: 2px; }
.notebook-pages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.notebook-pages button { padding: 6px 2px; margin: 0; font-size: 14px; }
.notebook-pages button[aria-current="true"] { border-color: #f0d693; background: #405340; }
.notebook-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.notebook-panel textarea {
  display: block; width: 100%; min-height: 180px; resize: vertical; padding: 12px;
  background: #eee9d8; color: #18241f; font: 16px/1.5 system-ui, sans-serif; user-select: text;
}
.clue-panel {
  position: fixed; z-index: 73; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 32px));
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; padding: 22px 22px 16px;
  border: 1px solid #8a7a5c; border-radius: 6px; background: #efe6cf; color: #2a241a;
  box-shadow: 0 16px 48px #000a; font-family: Georgia, 'Times New Roman', serif; user-select: text;
}
.clue-panel[hidden], .clue-panel [hidden] { display: none !important; }
.clue-masthead { margin: 0; text-align: center; font-size: 13px; letter-spacing: .24em; border-bottom: 1px solid #8a7a5c; padding-bottom: 6px; }
.clue-dateline { margin: 6px 0 10px; text-align: center; font-size: 13px; font-style: italic; color: #5a4d36; }
.clue-headline { margin: 0 0 10px; font-size: 20px; line-height: 1.25; text-align: center; }
.clue-body { margin: 0 0 12px; line-height: 1.55; font-size: 16px; }
.clue-pieces { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.clue-piece { padding: 10px 12px; background: #f8f1de; border: 1px solid #b8a67f; line-height: 1.5; font-size: 16px;
  clip-path: polygon(0 4%, 12% 0, 30% 5%, 55% 1%, 78% 6%, 100% 2%, 99% 94%, 82% 100%, 60% 95%, 35% 100%, 14% 96%, 1% 100%); }
.clue-piece-missing { background: transparent; border-style: dashed; color: #7d6f55; font-style: italic; clip-path: none; }
.clue-close { display: block; margin: 4px auto 0; min-height: 44px; padding: 9px 18px; border: 1px solid #8a7a5c;
  border-radius: 4px; background: #d9ccaa; color: inherit; font: inherit; font-size: 16px; cursor: pointer; }
.clue-panel :focus-visible { outline: 2px solid #7a5b12; outline-offset: 2px; }
.notebook-count { margin: 6px 0; font-size: 14px; }
.notebook-confirm-drop { border-color: #dfac6b !important; }

.build-version {
  position: fixed;
  z-index: 80;
  right: calc(8px + env(safe-area-inset-right));
  bottom: calc(5px + env(safe-area-inset-bottom));
  padding: 3px 6px;
  border-radius: 2px;
  color: #eef0e8;
  background: rgba(13, 20, 24, .88);
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  pointer-events: none;
}

.hud-visibility-toggle {
  position: fixed;
  z-index: 30;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(224, 162, 75, .62);
  border-radius: 2px;
  background: rgba(13, 20, 24, .78);
  color: #e0a24b;
  box-shadow: 0 5px 18px rgba(4, 8, 10, .28);
  font: 18px/1 ui-monospace, monospace;
  cursor: pointer;
}
.hud-visibility-toggle:hover { background: rgba(28, 39, 42, .9); }
.hud-visibility-toggle:focus-visible { outline: 2px solid #eef0e8; outline-offset: 2px; }

.voice-controls {
  position: static;
  width: 100%; overflow-wrap: anywhere;
  padding: 10px 12px; border-left: 2px solid #e0a24b;
  background: rgba(13,20,24,.96); color: #eef0e8;
  font: 13px/1.4 "Avenir Next Condensed", "Arial Narrow", sans-serif;
}
.voice-controls[hidden], .voice-controls [hidden] { display: none; }
.voice-controls summary { cursor: pointer; min-height: 44px; padding: 10px 0; }
.voice-controls button {
  min-height: 44px; margin: 3px 5px 3px 0; padding: 7px 9px;
  border: 1px solid #66705f; background: #111821; color: #eef0e8; cursor: pointer;
}
.voice-controls label { display: block; margin-bottom: 4px; }
.voice-controls select, .voice-controls input {
  display: block; width: 100%; max-width: 100%; min-height: 44px; margin-bottom: 8px;
  padding: 7px 9px; border: 1px solid #66705f; background: #111821; color: #eef0e8;
  font: inherit;
}
.voice-controls button:focus-visible, .voice-controls summary:focus-visible, .voice-controls select:focus-visible, .voice-controls input:focus-visible {
  outline: 2px solid #e0a24b; outline-offset: 2px;
}
.voice-note { color: #aab3ae; font-size: 12px; }
.voice-station-form { margin-top: 12px; padding-top: 10px; border-top: 1px solid #39463e; }
.voice-station-broadcast { margin: 4px 0 12px; padding: 8px 10px; border-left: 2px solid #e0a24b; background: #192323; white-space: pre-wrap; overflow-wrap: anywhere; }

.start-surface {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 42%, #1c272a, #090e12 72%);
}
.start-surface[hidden] { display: none; }
/* The optional account block makes the welcome card taller; let it scroll on
   short phones instead of clipping. */
.start-surface { overflow-y: auto; align-items: safe center; }
.start-card {
  width: min(320px, calc(100vw - 40px));
  display: grid;
  gap: 18px;
  padding: 28px;
  border-left: 2px solid #e0a24b;
  background: rgba(13, 20, 24, .88);
  box-shadow: 0 18px 70px rgba(4, 8, 10, .42);
}
.start-card strong { color: #e0a24b; font-size: 22px; letter-spacing: .38em; }
.start-card span { color: #aab3ae; font: 11px/1.55 ui-monospace, monospace; letter-spacing: .08em; }
.start-card button {
  min-height: 48px;
  border: 1px solid #e0a24b;
  border-radius: 2px;
  background: rgba(224, 162, 75, .12);
  color: #eef0e8;
  font: 11px ui-monospace, monospace;
  letter-spacing: .22em;
}
.start-card button:disabled { border-color: #66705f; color: #66705f; background: transparent; }
.start-card [hidden] { display: none; }
.start-surface[data-state='preparing-world'] {
  overflow-y: auto;
  align-items: safe center;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
.start-surface[data-state='preparing-world'] .start-card {
  width: min(760px, calc(100vw - 40px));
}
.loading-quotes { display: grid; gap: 20px; }
.loading-quotes blockquote { display: grid; gap: 14px; margin: 0; }
.loading-quote-text {
  max-width: 42ch;
  margin: 0;
  color: #eef0e8;
  font-family: inherit;
  font-size: clamp(26px, 4.2vw, 48px);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
}
.loading-quote-attribution {
  color: #eef0e8;
  font-family: inherit;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.35;
  letter-spacing: 0;
  text-align: right;
  font-weight: 700;
}
.start-card .loading-quotes-toggle {
  justify-self: start;
  min-height: 44px;
  padding: 8px 12px;
  border-color: #66705f;
  background: transparent;
  color: #aab3ae;
  font-family: inherit;
  letter-spacing: .04em;
}
.loading-quotes-toggle:focus-visible { outline: 2px solid #e0a24b; outline-offset: 3px; }
.place-search-form, .traveller-name-field { display: grid; gap: 10px; }
.place-search-form label, .traveller-name-field label { color: #aab3ae; font: 9px ui-monospace, monospace; letter-spacing: .12em; }
.place-search-form input, .traveller-name-field input {
  min-width: 0;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid #66705f;
  background: #111821;
  color: #eef0e8;
  font: 14px ui-monospace, monospace;
}
.place-search-results { display: grid; gap: 8px; max-height: 38vh; overflow: auto; }
.traveller-name-field input { font-size: 16px; }
.place-search-results button { text-align: left; letter-spacing: .06em; line-height: 1.4; }
.location-attribution { color: #88938e; font: 9px/1.4 ui-monospace, monospace; }

/* Optional passkey accounts: start card and Settings. */
.account-panel { display: grid; gap: 10px; }
.account-panel[hidden], .account-panel [hidden] { display: none; }
.account-start { padding-top: 14px; border-top: 1px solid #39463e; }
.account-panel p { margin: 0; color: #aab3ae; font: 11px/1.55 ui-monospace, monospace; letter-spacing: .04em; }
.account-panel button { min-height: 44px; }
.account-signin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.account-signin-row span { color: #aab3ae; font: 11px ui-monospace, monospace; letter-spacing: .04em; }
.account-signin-row button { flex: 1 1 120px; }
.start-card .account-link {
  justify-self: start;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: #aab3ae;
  text-decoration: underline;
  letter-spacing: .04em;
}
.account-code-form { display: grid; gap: 8px; }
.account-code-form label { color: #aab3ae; font: 9px ui-monospace, monospace; letter-spacing: .12em; }
.account-code-form input {
  min-width: 0;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid #66705f;
  background: #111821;
  color: #eef0e8;
  font: 16px ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.account-confirm, .account-reveal { display: grid; gap: 8px; padding: 10px; border: 1px solid #66705f; background: rgba(17, 24, 33, .9); }
.account-code {
  display: block;
  padding: 10px 6px;
  color: #eef0e8;
  font: 600 15px/1.4 ui-monospace, monospace;
  letter-spacing: .08em;
  text-align: center;
  overflow-wrap: anywhere;
  user-select: all;
}
.account-status:empty { display: none; }
.account-panel button:focus-visible, .account-code-form input:focus-visible { outline: 2px solid #e0a24b; outline-offset: 3px; }

.first-day-home-panel {
  position: fixed;
  z-index: 24;
  top: max(80px, env(safe-area-inset-top));
  right: max(24px, env(safe-area-inset-right));
  width: min(380px, calc(100vw - 48px));
  max-height: calc(100vh - 160px);
  overflow: auto;
  padding: 20px;
  border-left: 2px solid #e0a24b;
  background: rgba(13, 20, 24, .94);
  box-shadow: 0 18px 70px rgba(4, 8, 10, .48);
}
.first-day-home-panel[hidden] { display: none; }
.first-day-home-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.first-day-home-heading strong { color: #e0a24b; letter-spacing: .18em; }
.first-day-home-panel p { color: #c1cbc5; font: 12px/1.55 ui-monospace, monospace; }
.first-day-home-panel button { min-height: 44px; border: 1px solid rgba(224, 162, 75, .72); background: rgba(224, 162, 75, .08); color: #eef0e8; font: 10px ui-monospace, monospace; letter-spacing: .08em; }
.first-day-home-confirmation { display: grid; gap: 8px; }
.first-day-home-storage { display: grid; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(170, 179, 174, .24); }
.first-day-home-storage[hidden] { display: none; }
.first-day-home-storage span { color: #aab3ae; font: 12px ui-monospace, monospace; }
/* Game panels (Rob, 25 September 2026): Pack, Map, Pause and People share the
   Pack's frame, a visible Close and click-off dismissal. Rule: documentation/Design.md. */
.game-panel {
  border: 1px solid var(--panel-edge);
  border-left: 3px solid var(--pack-accent);
  border-radius: var(--panel-radius);
  background: var(--pack-surface);
  color: #eef0e8;
  box-shadow: 0 22px 72px rgba(2, 8, 9, .58);
}
.game-panel .game-panel-close {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(151, 177, 164, .48);
  border-radius: 4px;
  background: #1a2a2d;
  color: #eef0e8;
  font: 13px/1.25 "Avenir Next", Avenir, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.game-panel .game-panel-close:hover { border-color: var(--pack-capacity); background: #213538; }
.first-day-scavenge-panel {
  z-index: 25;
  width: min(560px, calc(100vw - 48px));
  max-height: min(760px, calc(100dvh - 112px));
  padding: 0 20px 20px;
  font-family: "Avenir Next", Avenir, sans-serif;
  scrollbar-color: #61736a transparent;
}
.first-day-scavenge-panel .first-day-home-heading {
  position: sticky;
  z-index: 2;
  top: 0;
  margin: 0 -20px;
  padding: 17px 20px 14px;
  border-bottom: 1px solid var(--pack-rule);
  background: rgba(11, 20, 22, .985);
}
.first-day-scavenge-panel .first-day-home-heading strong {
  color: #f3f0e7;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .025em;
}
.first-day-scavenge-panel > #first-day-scavenge-message {
  max-width: 54ch;
  margin: 15px 0 2px;
  color: var(--pack-muted);
  font: 13px/1.5 "Avenir Next", Avenir, sans-serif;
}
.first-day-scavenge-panel button {
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid rgba(151, 177, 164, .48);
  border-radius: 4px;
  background: #1a2a2d;
  color: #eef0e8;
  font: 12px/1.25 "Avenir Next", Avenir, sans-serif;
  letter-spacing: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.first-day-scavenge-panel button:hover:not(:disabled) { border-color: var(--pack-capacity); background: #213538; }
.first-day-map-feedback { display: grid; gap: 8px; }
.first-day-map-feedback p { margin: 0; color: #e0a24b; }
.first-day-map-feedback [hidden] { display: none; }
.writing-panel { z-index: 26; }
.writing-panel textarea, .writing-panel input { box-sizing: border-box; width: 100%; background: #0d1418; color: #eef0e8; border: 1px solid #77827c; padding: 10px; font: inherit; }
.writing-panel textarea { resize: vertical; min-height: 100px; }
.writing-panel label { color: #aab3ae; font-size: 12px; }
#writing-size { display: flex; gap: 12px; margin: 12px 0; }
#writing-size[hidden], .writing-panel [hidden] { display: none; }
.writing-panel button:disabled { opacity: .5; cursor: not-allowed; }
.writing-panel :focus-visible { outline: 2px solid #e0a24b; outline-offset: 2px; }
.erasure-actions { display: grid; gap: 8px; }
#erasure-history { overflow-wrap: anywhere; color: #aab3ae; font-size: 12px; }
#first-day-note-list p { white-space: pre-wrap; overflow-wrap: anywhere; }
.first-day-item-row { flex-wrap: wrap; }
.first-day-scavenge-panel .first-day-inventory-section {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--pack-rule);
}
.first-day-inventory-section { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(170, 179, 174, .24); }
.first-day-inventory-section[hidden] { display: none; }
.first-day-inventory-section > strong { color: #aab3ae; font: 10px ui-monospace, monospace; letter-spacing: .14em; }
.first-day-scavenge-panel .first-day-inventory-section > strong {
  color: var(--pack-capacity);
  font: 11px/1.2 "Avenir Next", Avenir, sans-serif;
  font-weight: 600;
  letter-spacing: .06em;
}
.first-day-item-list { display: grid; gap: 7px; }
.first-day-scavenge-panel .first-day-item-list { gap: 8px; }
.first-day-item-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; color: #eef0e8; font: 12px ui-monospace, monospace; }
.first-day-scavenge-panel .first-day-item-row {
  justify-content: flex-end;
  gap: 7px;
  min-height: 54px;
  padding: 8px;
  border: 1px solid rgba(151, 177, 164, .2);
  border-radius: 5px;
  background: rgba(23, 38, 40, .72);
  font: 14px/1.35 "Avenir Next", Avenir, sans-serif;
}
.first-day-item-row > span:first-child { flex: 1 1 190px; min-width: 0; overflow-wrap: anywhere; }
.first-day-item-row button { min-width: 72px; }
.first-day-power-status { flex-basis: 100%; overflow-wrap: anywhere; color: #d7dcc8; }
.first-day-item-empty { color: #77827c; font: 12px ui-monospace, monospace; }
.first-day-pack-capacity { margin: 0; }
.first-day-scavenge-panel .first-day-pack-capacity {
  padding: 9px 11px;
  border-left: 3px solid var(--pack-capacity);
  border-radius: 2px;
  background: rgba(143, 198, 173, .08);
  color: #dce8e1;
  font: 13px/1.35 ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.first-day-equipped-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #eef0e8; font: 12px ui-monospace, monospace; }
.first-day-scavenge-panel .first-day-equipped-row {
  padding: 11px;
  border: 1px solid rgba(224, 162, 75, .45);
  border-radius: 5px;
  background: rgba(224, 162, 75, .07);
  font-family: "Avenir Next", Avenir, sans-serif;
}
.first-day-equipped-row[hidden], .first-day-scavenge-panel [hidden] { display: none; }
.first-day-equipped-row > span { display: grid; gap: 3px; }
.first-day-equipped-row small { color: #aab3ae; font: 10px ui-monospace, monospace; }
.first-day-scavenge-panel #first-day-equipped-discard-note { max-width: 32ch; color: #c9bfae; font: 12px/1.35 "Avenir Next", Avenir, sans-serif; }
.first-day-equipment-status { margin: 0; color: #e0a24b !important; }
.first-day-discard-confirmation,
.first-day-discard-status { flex: 1 0 100%; color: #f0c98f; font-size: 13px; line-height: 1.4; }
.first-day-scavenge-panel [data-action="request-discard"] { border-color: rgba(202, 163, 120, .42); color: #e2c7a6; }
.first-day-scavenge-panel [data-action="confirm-discard"] { border-color: #d89150; background: #5b2d23; color: #fff4e7; }
.first-day-scavenge-panel [data-action="cancel-discard"] { border-color: var(--pack-capacity); }
.first-day-discard-recovery { margin-top: 14px; padding: 11px; border: 1px solid rgba(224, 162, 75, .48); background: rgba(224, 162, 75, .08); }
.first-day-discard-recovery p { margin: 0 0 9px; color: #f0c98f; font-family: "Avenir Next", Avenir, sans-serif; }
.first-day-scavenge-panel button:disabled { opacity: .5; cursor: not-allowed; }
.first-day-scavenge-panel :focus-visible { outline: 3px solid #f0c98f; outline-offset: 2px; }
.carried-compass-control {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 16px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #77827c;
  background: #0d1418;
  color: #eef0e8;
  font-family: ui-monospace, monospace;
  text-align: left;
}
.carried-compass-control[hidden] { display: none; }
.carried-compass-header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.carried-compass-header strong { color: #aab3ae; font-size: 11px; font-weight: 500; }
.carried-compass-header button { min-width: 72px; min-height: 44px; }
.carried-compass-direction { color: #e0a24b; font-size: 40px; line-height: 1; }
.carried-compass-degrees { color: #eef0e8; font-size: 18px; }
.carried-compass-status { grid-column: 1 / -1; margin: 2px 0 0; color: #aab3ae !important; }
.carried-compass-dial { grid-column: 2; grid-row: 2 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #77827c; border-radius: 50%; }
.carried-compass-needle { color: #e0a24b; transform: rotate(var(--compass-north-rotation)); transform-origin: 50% 50%; }
.home-reticle {
  position: fixed;
  z-index: 12;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 12px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.home-reticle[hidden] { display: none; }
.home-reticle span[hidden] { display: none; }
.home-reticle span {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(238, 240, 232, .76);
  border-radius: 50%;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.home-reticle[data-state="dwelling"] span,
.home-reticle[data-state="focused"] span {
  border-color: #e0a24b;
  box-shadow: 0 0 14px rgba(224, 162, 75, .72);
}
.home-reticle[data-state="focused"] span { transform: scale(.78); }
.home-world-label {
  position: fixed;
  z-index: 12;
  left: 50%;
  top: calc(50% + 42px);
  transform: translateX(-50%);
  padding: 5px 8px;
  background: rgba(13, 20, 24, .72);
  color: #e0a24b;
  font: 10px ui-monospace, monospace;
  letter-spacing: .15em;
  pointer-events: none;
}
.home-world-label[hidden], .home-compass[hidden] { display: none; }
.home-compass {
  position: fixed;
  z-index: 12;
  left: 50%;
  bottom: calc(62px + env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: 3px;
  color: #e0a24b;
  transform: translateX(-50%);
  pointer-events: none;
}
.home-compass-arrow { font: 22px/1 ui-monospace, monospace; transform: rotate(var(--home-bearing)); }
.home-compass small { font: 9px ui-monospace, monospace; letter-spacing: .15em; }
/* Carried compass dial (card 5cbd04db): the rose turns with the view, the
   top tick is where you face and the amber rim marker is home. */
.home-compass[data-variant="compass"] { bottom: calc(28px + env(safe-area-inset-bottom)); }
.home-compass[data-variant="compass"] small,
.home-compass[data-variant="compass"] .home-compass-arrow,
.home-compass[data-variant="arrow"] .home-compass-dial { display: none; }
.home-compass-dial {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  border: 1px solid var(--panel-edge, #77827c);
  border-radius: 50%;
  background: rgba(13, 20, 24, .78);
  box-shadow: 0 4px 16px rgba(2, 8, 9, .45);
}
.home-compass-rose { position: absolute; inset: 0; transform: rotate(var(--compass-north-rotation, 0deg)); }
.home-compass-rose b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  margin: -6px 0 0 -6px;
  color: #aab3ae;
  font: 10px/12px ui-monospace, monospace;
  font-weight: 400;
  text-align: center;
}
.home-compass-rose .n { color: #eef0e8; font-weight: 700; transform: rotate(0deg) translateY(-20px) rotate(calc(-1 * var(--compass-north-rotation, 0deg))); }
.home-compass-rose .e { transform: rotate(90deg) translateY(-20px) rotate(calc(-90deg - var(--compass-north-rotation, 0deg))); }
.home-compass-rose .s { transform: rotate(180deg) translateY(-20px) rotate(calc(-180deg - var(--compass-north-rotation, 0deg))); }
.home-compass-rose .w { transform: rotate(270deg) translateY(-20px) rotate(calc(-270deg - var(--compass-north-rotation, 0deg))); }
.home-compass-lubber { position: absolute; left: 50%; top: -1px; width: 2px; height: 7px; margin-left: -1px; background: #eef0e8; }
.home-compass-home { position: absolute; inset: 0; transform: rotate(var(--home-bearing, 0rad)); }
.home-compass-home i {
  position: absolute;
  left: 50%;
  top: -5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  box-sizing: border-box;
  border: 2px solid #0d1418;
  border-radius: 50%;
  background: #e0a24b;
}
.home-compass[data-home="false"] .home-compass-home { display: none; }

@media (max-width: 680px) {
  .first-day-home-panel { inset: auto 12px calc(12px + env(safe-area-inset-bottom)); width: auto; max-height: min(58vh, 520px); }
  .first-day-scavenge-panel {
    inset: auto 16px calc(16px + env(safe-area-inset-bottom));
    width: auto;
    max-height: min(72dvh, 660px);
    padding: 0 14px 14px;
  }
  .first-day-scavenge-panel .first-day-home-heading { margin: 0 -14px; padding: 14px; }
  .first-day-scavenge-panel button { min-height: 44px; }
  .first-day-scavenge-panel .first-day-item-row { align-items: stretch; }
  .first-day-item-row > span:first-child { flex-basis: 100%; }
  .writing-panel { top: max(12px, env(safe-area-inset-top)); bottom: auto; max-height: calc(100dvh - 240px - env(safe-area-inset-bottom)); }
  .first-day-home-heading { position: sticky; top: -20px; padding: 12px 0; background: rgba(13, 20, 24, .98); }
}

.identity {
  position: fixed;
  top: max(20px, env(safe-area-inset-top));
  left: 24px;
  max-width: calc(100vw - 48px);
  letter-spacing: .18em;
  text-shadow: 0 1px 12px #111821;
  pointer-events: none;
}
.identity .name { color: #e0a24b; font-size: 21px; font-weight: 700; letter-spacing: .34em; }
.identity #place { color: #c1cbc5; margin-top: 7px; font: 12px/1.45 ui-monospace, monospace; }
.people-panel {
  position: fixed; z-index: 25; top: 72px; right: 24px;
  width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 100px);
  overflow: auto; overscroll-behavior: contain; padding: 0 20px 20px; font: 14px/1.5 "Avenir Next", Avenir, sans-serif;
}
.people-panel[hidden] { display: none; }
.people-panel > header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; margin: 0 -20px; padding: 12px 20px; background: #0b1416; border-bottom: 1px solid #39463e; }
.people-panel h1 { font-size: 20px; margin: 0; font-weight: 500; }
.people-panel button { min-height: 44px; padding: 8px 12px; background: #172223; border: 1px solid #61736a; border-radius: 4px; color: inherit; font: inherit; cursor: pointer; }
.people-panel button:focus-visible { outline: 3px solid #f0c98f; outline-offset: 2px; }
.people-bullseye { display: block; width: min(240px, 100%); margin: 16px auto 8px; }
.people-bullseye circle { fill: rgba(151,177,164,.04); stroke: #61736a; stroke-width: 1; }
.people-bullseye circle:last-of-type { stroke: #e0a24b; fill: rgba(224,162,75,.08); }
.people-bullseye text { fill: #d7dfd6; font: 11px "Avenir Next", sans-serif; text-anchor: middle; letter-spacing: 1px; }
.people-bullseye .people-you { font-size: 8px; fill: #e0a24b; }
.people-distance-note, #people-status { font-size: 12px; color: #b4c2b9; }
.people-panel table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.people-panel caption { text-align: left; padding-bottom: 8px; }
.people-panel th, .people-panel td { padding: 9px 3px; border-bottom: 1px solid #39463e; text-align: right; font-weight: 400; }
.people-panel th:first-child { text-align: left; }
.people-total { margin: 14px 0 0; font-size: 18px; color: #f5efe0; }
.people-nearby h2 { margin: 18px 0 4px; font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.people-nearby ul { margin: 6px 0 0; padding-left: 18px; font-variant-numeric: tabular-nums; }
.people-nearby li { padding: 3px 0; }
.hud-buttons .hud-count { margin-left: 6px; font-variant-numeric: tabular-nums; color: #f0c98f; }
.hud-buttons .hud-count[hidden] { display: none; }
.people-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.people-groups button { padding: 8px 3px; cursor: default; color: #b4c2b9; }
.people-groups small { display: block; font-size: 10px; }
@media (max-width: 680px) {
  .people-panel { top: max(108px, calc(env(safe-area-inset-top) + 96px)); right: 16px; max-height: calc(100dvh - 132px - env(safe-area-inset-bottom)); padding-right: 12px; padding-left: 12px; }
  .people-panel > header { margin-right: -12px; margin-left: -12px; padding-right: 12px; padding-left: 12px; }
}
/* Controller menu navigation (card 0865bf55): a clear ring on every panel control. */
:is(.developer-panel, .project-panel, .globe-panel, .capture-panel, [role="dialog"]) :focus-visible,
html[data-gamepad-focus] :is(.developer-panel, .project-panel, .globe-panel, .capture-panel, [role="dialog"]) :focus { outline: 2px solid #f0c98f; outline-offset: 2px; }
#hud-pack:disabled, #navigation-toggle:disabled {
  opacity: .5;
  cursor: default;
}
.navigation-panel {
  position: fixed;
  inset: 0;
  z-index: 72;
  display: flex;
  min-width: 0;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow: hidden;
  background: rgba(4, 8, 10, .9);
  color: #f5efe0;
  font-family: "Avenir Next", Avenir, sans-serif;
  overscroll-behavior: contain;
}
.navigation-panel[hidden], .navigation-panel [hidden] { display: none; }
.navigation-shell {
  width: min(1120px, 100%);
  height: min(760px, 100%);
  min-width: 0;
  min-height: 0;
  margin: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 22px;
}
.navigation-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.navigation-heading h1 { margin: 0; color: #f5efe0; font-size: 25px; font-weight: 500; letter-spacing: -.02em; }
.navigation-heading p { margin: 3px 0 0; color: #98c7b2; font-size: 13px; }
.navigation-panel button,
.navigation-panel input {
  min-height: 44px;
  border: 1px solid rgba(152, 199, 178, .55);
  border-radius: 2px;
  background: #182429;
  color: #f5efe0;
  font: 13px/1.35 "Avenir Next", Avenir, sans-serif;
}
.navigation-panel button { padding: 10px 12px; cursor: pointer; touch-action: manipulation; }
.navigation-panel button:disabled, .navigation-panel input:disabled { opacity: .45; cursor: default; }
.navigation-panel button:focus-visible,
.navigation-panel input:focus-visible,
.navigation-canvas:focus-visible { outline: 3px solid #e0a24b; outline-offset: 2px; }
#navigation-close { flex: 0 0 auto; }
.navigation-places-toggle { display: none; }
.navigation-layout { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 18px; }
.navigation-places { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(88px, 1fr) auto auto auto auto; gap: 12px; overflow: auto; overscroll-behavior: contain; padding-right: 4px; }
.navigation-list { display: flex; min-height: 0; flex-direction: column; gap: 7px; overflow: auto; overscroll-behavior: contain; }
.navigation-list button { flex: 0 0 auto; text-align: left; overflow-wrap: anywhere; }
.navigation-list button[aria-current='true'] { border-color: #e0a24b; background: rgba(224, 162, 75, .13); }
.navigation-list button[data-navigation-id='home'] { border-color: #6f7e63; color: #f5efe0; }
.navigation-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.navigation-name-form { display: grid; gap: 7px; }
.navigation-name-form label { color: #98c7b2; font-size: 13px; }
.navigation-name-form input { width: 100%; min-width: 0; padding: 9px 10px; user-select: text; }
.navigation-editor-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.navigation-areas { display: grid; min-width: 0; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(152, 199, 178, .3); }
.navigation-areas h2 { margin: 0; color: #f5efe0; font-size: 15px; font-weight: 500; }
.navigation-areas-list { display: flex; flex-direction: column; gap: 7px; max-height: 180px; overflow: auto; overscroll-behavior: contain; }
.navigation-areas-list button { flex: 0 0 auto; text-align: left; overflow-wrap: anywhere; }
#navigation-areas-status { margin: 0; color: #98c7b2; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.navigation-map { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #183543; }
.navigation-map::before {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: rgba(111, 126, 99, .12);
  box-shadow: 0 0 100px rgba(152, 199, 178, .18);
  pointer-events: none;
}
.navigation-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 280px; touch-action: none; }
.navigation-zoom { position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; gap: 6px; }
.navigation-zoom button { min-width: 44px; min-height: 44px; font-size: 24px; line-height: 1; }
#navigation-detail-status { position: absolute; top: 12px; right: 118px; left: 12px; margin: 0; color: #d4e8dc; font-size: 12px; line-height: 1.35; text-align: center; text-shadow: 0 1px 4px rgba(0, 0, 0, .9); pointer-events: none; }
#navigation-status { min-height: 20px; margin: 0; color: #98c7b2; font-size: 12px; line-height: 1.5; }
.memory-journal {
  position: fixed; inset: 0; z-index: 70;
  display: flex; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(4, 8, 10, .84); overscroll-behavior: contain;
}
.memory-journal[hidden] { display: none; }
.memory-sheet {
  width: min(920px, 100%); min-width: 0; margin: auto; max-height: 100%; height: 740px;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: #0d1418; border: 1px solid #38413f; padding: 24px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
  font-family: "Avenir Next", Avenir, sans-serif;
}
.memory-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.memory-heading strong { font-size: 18px; font-weight: 500; }
.memory-status { color: #aab3ae; font-size: 12px; margin: 8px 0 20px; }
.memory-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 0; gap: 28px; }
.memory-list { overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; }
.memory-journal button {
  min-height: 44px; flex-shrink: 0; padding: 10px 12px; text-align: left;
  color: #eef0e8; background: #192327; border: 1px solid #394844; border-radius: 2px; font: inherit; font-size: 13px;
  touch-action: manipulation; cursor: pointer;
}
.memory-journal button:disabled { opacity: .45; cursor: default; }
.memory-journal button[aria-current='true'] { border-color: #e0a24b; background: #292a23; }
.memory-journal button:focus-visible { outline: 2px solid #e0a24b; outline-offset: -3px; }
.memory-reading { overflow: auto; min-width: 0; overscroll-behavior: contain; padding-right: 12px; user-select: text; }
.memory-chapter { color: #e0a24b; font-size: 12px; margin: 0 0 12px; }
#memory-title { margin: 0 0 24px; font-size: clamp(24px, 4vw, 34px); font-weight: 500; }
#memory-body { max-width: 65ch; font-size: 17px; line-height: 1.75; }
#memory-body p { margin: 0 0 1.4em; }
.memory-audio { margin-bottom: 24px; }
.memory-audio audio { display: block; width: 100%; min-width: 0; margin-bottom: 12px; color-scheme: dark; }
.memory-audio audio:focus-visible { outline: 2px solid #e0a24b; outline-offset: 3px; }
.memory-audio [hidden] { display: none; }
.memory-navigation { display: flex; justify-content: space-between; gap: 12px; padding-top: 20px; }
body[data-memory-journal='open'] #hud-visibility-toggle { visibility: hidden; }

@media (max-width: 680px) {
  #pack-toggle { display: none; }
  .navigation-panel { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  .navigation-shell { height: 100%; padding: 12px; grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .navigation-heading h1 { font-size: 21px; }
  .navigation-places-toggle { display: block; width: 100%; }
  .navigation-layout { position: relative; display: block; min-height: 0; }
  .navigation-map { width: 100%; height: 100%; min-height: 260px; }
  .navigation-places {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    max-height: min(56dvh, 430px);
    padding: 10px;
    overflow: auto;
    background: rgba(13, 20, 24, .98);
    border: 1px solid rgba(152, 199, 178, .55);
  }
  .navigation-list { min-height: 72px; max-height: 150px; }
  #navigation-detail-status { top: 10px; font-size: 11px; }
  .memory-journal { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .memory-sheet { padding: 16px; height: 100%; }
  .memory-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(44px, 100px) minmax(0, 1fr); gap: 18px; }
  .memory-list { flex-direction: row; align-items: flex-start; }
  .memory-list button { max-width: 180px; }
  .memory-reading { padding-right: 4px; }
  .memory-status { margin-bottom: 12px; }
  .memory-navigation { padding-top: 12px; }
}

.settings-testing { margin-block: 18px; padding-top: 12px; border-top: 1px solid rgba(152, 199, 178, .3); }
.settings-testing[hidden] { display: none; }
.settings-testing h2 { font-size: 16px; margin: 0 0 8px; }
.settings-testing select { width: 100%; min-width: 0; min-height: 44px; margin-block: 8px; font: inherit; color: inherit; background: #17272d; border: 1px solid #71988a; border-radius: 6px; padding: 8px; }
.testing-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.testing-actions button { min-height: 44px; flex: 1 1 130px; white-space: normal; }
.testing-actions button[hidden] { display: none; }
.settings-testing :focus-visible { outline: 2px solid #c6dfd3; outline-offset: 3px; }

.wonder-beta-rail {
  position: fixed;
  z-index: 13;
  top: max(88px, calc(env(safe-area-inset-top) + 88px));
  bottom: calc(148px + env(safe-area-inset-bottom));
  left: 24px;
  width: min(340px, calc(100vw - 48px));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  pointer-events: none;
}
.beta-build-status,
.wonder-beta-rail .world-layers-panel,
.wonder-beta-rail .settings-toggle,
.wonder-beta-rail .project-toggle { pointer-events: auto; }
.beta-build-status {
  border-left: 2px solid #e0a24b;
  padding: 11px 12px 12px;
  background: linear-gradient(90deg, rgba(13, 20, 24, .92), rgba(13, 20, 24, .58));
  box-shadow: 0 8px 28px rgba(4, 8, 10, .28);
  font: 11px/1.45 ui-monospace, monospace;
}
.wonder-local-beta {
  color: #e0a24b;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
}
.beta-build-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}
.beta-build-row code {
  overflow: hidden;
  color: #eef0e8;
  font: 13px/1.4 ui-monospace, monospace;
  text-overflow: ellipsis;
}
.beta-build-row button {
  min-height: 44px;
  border: 1px solid rgba(224, 162, 75, .72);
  background: rgba(224, 162, 75, .08);
  color: #eef0e8;
  font: 10px ui-monospace, monospace;
  letter-spacing: .08em;
}
.beta-build-row button:disabled { border-color: #59625d; color: #77817c; }
.wonder-beta-runtime-state {
  margin-top: 3px;
  color: #aab3ae;
  font-size: 11px;
  letter-spacing: .08em;
}
.beta-release-history { margin-top: 12px; border-top: 1px solid rgba(170, 179, 174, .18); }
.beta-release-history summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: #dce2dc;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .05em;
}
.beta-release-history summary::before { content: '›'; width: 18px; color: #e0a24b; }
.beta-release-history[open] summary::before { transform: rotate(90deg); }
.beta-release-history ol { margin: 0; padding: 0; list-style: none; }
.beta-release-history li { padding: 8px 0; border-top: 1px solid rgba(170, 179, 174, .12); }
.beta-release-history li[data-current='true'] { border-left: 2px solid #e0a24b; padding-left: 9px; }
.beta-release-identity,
.beta-release-summary { display: block; }
.beta-release-identity { color: #d8b475; font-size: 11px; letter-spacing: .05em; }
.beta-release-summary { margin-top: 3px; color: #b7c0ba; font-size: 11px; line-height: 1.45; }

.god-mode-hud {
  position: fixed;
  top: max(72px, calc(env(safe-area-inset-top) + 72px));
  left: 24px;
  display: flex;
  gap: 12px;
  border-left: 2px solid #e0a24b;
  padding: 6px 10px;
  background: rgba(13, 20, 24, .68);
  font: 10px ui-monospace, monospace;
  letter-spacing: .14em;
  pointer-events: none;
}
.god-mode-hud[hidden] { display: none; }
.god-mode-hud strong { color: #e0a24b; }
.god-mode-hud span { color: #eef0e8; }

.land-cover-hud {
  position: fixed;
  top: max(96px, calc(env(safe-area-inset-top) + 96px));
  left: 24px;
  max-width: min(480px, calc(100vw - 48px));
  border-left: 2px solid #74805e;
  padding: 5px 9px;
  background: rgba(13, 20, 24, .68);
  color: #bdc7ad;
  font: 9px ui-monospace, monospace;
  letter-spacing: .1em;
  pointer-events: none;
}
.land-cover-hud[hidden] { display: none; }
.wonder-beta-rail .god-mode-hud,
.wonder-beta-rail .land-cover-hud {
  position: static;
  width: 100%;
  max-width: none;
  margin-top: 16px;
  pointer-events: none;
}
.wonder-beta-rail .settings-toggle {
  position: static;
  width: fit-content;
  margin-top: 16px;
  flex: 0 0 auto;
}
.wonder-beta-rail .project-toggle {
  position: static;
  width: fit-content;
  margin-top: 8px;
  flex: 0 0 auto;
}
.wonder-beta-rail .god-mode-hud { font-size: 11px; line-height: 1.45; }
.wonder-beta-rail .land-cover-hud {
  padding: 9px 11px;
  color: #d1ddbf;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .06em;
}

.telemetry {
  position: fixed;
  top: max(22px, env(safe-area-inset-top));
  right: 24px;
  width: 248px;
  border-left: 1px solid rgba(224, 162, 75, .55);
  background: linear-gradient(90deg, rgba(13, 20, 24, .72), rgba(13, 20, 24, .12));
  padding: 10px 14px;
  pointer-events: none;
}
.telemetry div { display: grid; grid-template-columns: 68px 1fr; gap: 10px; margin: 5px 0; }
.telemetry span, body > footer { font: 9px ui-monospace, monospace; letter-spacing: .12em; }
.telemetry span { color: #8d9893; }
.telemetry strong { font: 10px ui-monospace, monospace; font-weight: 500; color: #eef0e8; }

.settings-toggle {
  position: fixed;
  z-index: 14;
  left: 24px;
  bottom: calc(104px + env(safe-area-inset-bottom));
  min-height: 44px;
  border: 1px solid rgba(224, 162, 75, .7);
  background: rgba(13, 20, 24, .82);
  color: #eef0e8;
  font: 11px ui-monospace, monospace;
  letter-spacing: .14em;
}
.capture-toggle {
  position: fixed; z-index: 14; left: 138px;
  bottom: calc(104px + env(safe-area-inset-bottom)); min-height: 44px;
  border: 1px solid rgba(170, 179, 174, .65); background: rgba(13, 20, 24, .82);
  color: #eef0e8; font: 11px ui-monospace, monospace; letter-spacing: .14em;
}
.project-toggle {
  position: fixed;
  z-index: 14;
  left: 246px;
  bottom: calc(104px + env(safe-area-inset-bottom));
  min-height: 44px;
  border: 1px solid rgba(116, 128, 94, .8);
  background: rgba(13, 20, 24, .88);
  color: #eef0e8;
  font: 11px ui-monospace, monospace;
  letter-spacing: .14em;
}
.project-panel {
  position: fixed;
  z-index: 32;
  top: max(20px, env(safe-area-inset-top));
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  width: min(660px, calc(100vw - 40px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 20px;
  border-left: 2px solid #e0a24b;
  background: rgba(13, 20, 24, .98);
  box-shadow: 0 18px 60px rgba(4, 8, 10, .72);
  user-select: text;
}
.project-panel[hidden], .project-content[hidden] { display: none; }
.diagnostics-toggle {
  cursor: pointer;
}
.diagnostics-panel {
  position: fixed; z-index: 74;
  top: max(16px, env(safe-area-inset-top)); bottom: max(16px, env(safe-area-inset-bottom));
  right: max(16px, env(safe-area-inset-right)); width: min(620px, calc(100vw - 32px));
  display: flex; flex-direction: column; padding: 20px; min-height: 0;
  border-left: 2px solid #e0a24b; background: rgba(13, 20, 24, .98);
  box-shadow: 0 18px 60px rgba(4, 8, 10, .72); color: #eef0e8;
  font: 14px/1.5 "Avenir Next", Avenir, sans-serif; user-select: text;
}
.diagnostics-panel[hidden], .diagnostics-panel [hidden] { display: none; }
/* Keep only Diagnostics reachable when the rest of the HUD is hidden. */
.diagnostics-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.diagnostics-heading h1 { margin: 0; color: #e0a24b; font-size: 23px; line-height: 1.25; }
.diagnostics-heading p { margin: 6px 0 12px; color: #aab3ae; font-size: 13px; }
.diagnostics-panel button {
  min-height: 44px; flex-shrink: 0; padding: 8px 12px; border: 1px solid #66705f; border-radius: 2px;
  background: #1a2226; color: #eef0e8; font: inherit; cursor: pointer;
}
.diagnostics-panel button:disabled { opacity: .6; cursor: wait; }
.diagnostics-actions { display: flex; align-items: center; gap: 12px; }
.diagnostics-actions span { color: #aab3ae; font-size: 12px; }
.diagnostics-panel #diagnostics-status { margin: 8px 0; font-size: 13px; }
.diagnostics-panel #diagnostics-status:empty { margin: 4px 0; }
.diagnostics-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; overflow-wrap: anywhere; padding-right: 4px; }
.diagnostics-panel #diagnostics-captured { margin: 8px 0 14px; color: #aab3ae; font-size: 12px; }
.diagnostics-legacy-position { margin-bottom: 12px; }
.diagnostics-legacy-position .telemetry {
  position: static;
  inset: auto;
  width: auto;
  margin: 0 0 14px;
  padding: 4px 12px 10px;
  border-left: 1px solid rgba(224, 162, 75, .55);
  background: #11191c;
  pointer-events: auto;
}
.diagnostics-legacy-position .telemetry div { grid-template-columns: minmax(72px, auto) minmax(0, 1fr); }
.diagnostics-panel details { border-top: 1px solid #34413e; }
.diagnostics-panel summary { min-height: 44px; padding: 11px 2px; cursor: pointer; font-weight: 600; }
.diagnostics-panel dl { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 7px 14px; margin: 0 0 16px; }
.diagnostics-panel dt { color: #aab3ae; }
.diagnostics-panel dd { margin: 0; font-variant-numeric: tabular-nums; }
.diagnostics-panel ol { padding-left: 22px; margin: 0 0 16px; }
.diagnostics-panel li { padding: 4px 0; }
.diagnostics-panel textarea {
  display: block; width: 100%; min-height: 160px; margin: 8px 0 16px; padding: 10px;
  border: 1px solid #66705f; background: #111821; color: #eef0e8;
  font: 12px/1.5 ui-monospace, monospace; user-select: text; resize: vertical;
}
.diagnostics-toggle:focus-visible, .diagnostics-panel :focus-visible { outline: 2px solid #e0a24b; outline-offset: 2px; }
@media (max-width: 680px) {
  .diagnostics-panel {
    top: max(8px, env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right));
    width: auto; padding: 14px;
  }
  .diagnostics-heading h1 { font-size: 21px; }
}
.project-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.project-heading > div { display: grid; gap: 6px; }
.project-heading-actions { display: flex !important; align-items: center; gap: 8px; }
.project-heading-actions .capture-toggle { position: static; left: auto; bottom: auto; min-height: 38px; margin: 0; }
.project-heading strong { color: #e0a24b; font: 17px ui-monospace, monospace; letter-spacing: .16em; }
.project-heading span { color: #95a09a; font: 11px/1.45 ui-monospace, monospace; letter-spacing: .07em; }
.project-heading button {
  min-width: 72px; min-height: 44px; border: 1px solid #66705f; background: #1a2226;
  color: #eef0e8; font: 11px ui-monospace, monospace;
}
.project-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 20px 0 14px; }
.project-tabs button {
  min-height: 48px; padding: 8px 12px; border: 1px solid #66705f; background: #171f23;
  color: #aab3ae; font: 12px/1.35 ui-monospace, monospace; letter-spacing: .08em;
}
.project-tabs button[aria-selected='true'] { border-color: #e0a24b; color: #eef0e8; background: rgba(224, 162, 75, .12); }
.project-content { display: grid; gap: 0; }
.project-current-state {
  margin: 0 0 8px; padding: 14px; border-left: 2px solid #e0a24b;
  background: rgba(224, 162, 75, .08); color: #d8ded9; font-size: 14px; line-height: 1.55;
}
.project-priority-heading { margin: 12px 2px 6px; color: #eef0e8; font-size: 16px; }
.project-priority-list {
  margin: 0 0 14px 28px; padding: 0; color: #d8ded9; font-size: 14px; line-height: 1.5;
}
.project-priority-list li { margin: 6px 0; padding-left: 5px; }
.project-release { padding: 14px 2px 18px; }
.project-release > h2, .project-candidate-heading { margin: 10px 0 6px; color: #eef0e8; font-size: 20px; }
.project-release > p, .project-candidate p { margin: 6px 0 0; color: #bdc6c1; font-size: 14px; line-height: 1.55; }
.project-roadmap-section { margin-top: 16px; }
.project-roadmap-section h3, .project-candidate h3 { margin: 0; color: #eef0e8; font-size: 15px; }
.project-roadmap-section ul { margin: 8px 0 0 22px; padding: 0; color: #cbd2ce; font-size: 14px; line-height: 1.5; }
.project-roadmap-section li { margin: 6px 0; padding-left: 4px; }
.project-candidate-heading { padding-top: 16px; border-top: 1px solid rgba(170, 179, 174, .18); }
.project-candidate { padding: 12px 2px; border-top: 1px solid rgba(170, 179, 174, .12); }
.project-item { padding: 16px 2px; border-top: 1px solid rgba(170, 179, 174, .18); }
.project-area { padding: 0; }
.project-area > summary { padding: 16px 2px; cursor: pointer; list-style-position: outside; }
.project-area > summary::marker { color: #e0a24b; }
.project-area[open] > summary { padding-bottom: 8px; }
.project-area > p { padding: 0 18px 0 18px; }
.project-item-heading { display: flex; align-items: start; justify-content: space-between; gap: 14px; }
.project-item h3 { margin: 0; color: #eef0e8; font-size: 17px; line-height: 1.35; letter-spacing: .02em; }
.project-item p { margin: 8px 0 0; max-width: 62ch; color: #bdc6c1; font-size: 14px; line-height: 1.58; }
.project-status {
  flex: 0 0 auto; padding: 4px 7px; border: 1px solid #66705f; color: #cbd2ce;
  font: 10px ui-monospace, monospace; letter-spacing: .08em;
}
.project-status[data-status='active'] { border-color: #e0a24b; color: #e0a24b; }
.project-status[data-status='next'] { border-color: #7c9aaa; color: #b7d1df; }
.project-status[data-status='parallel'] { border-color: #74805e; color: #bdc7ad; }
.project-backlog-list {
  margin: 12px 18px 18px 36px; padding: 0; color: #cbd2ce; font-size: 14px; line-height: 1.5;
}
.project-backlog-list li { margin: 8px 0; padding-left: 5px; }
.capture-panel {
  position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  display: grid; gap: 12px; padding: 16px; border-left: 2px solid #e0a24b;
  background: rgba(13, 20, 24, .97); box-shadow: 0 18px 56px rgba(4, 8, 10, .7);
  font: 11px/1.45 ui-monospace, monospace; letter-spacing: .07em;
}
.capture-panel[hidden] { display: none; }
.capture-heading { display: flex; align-items: center; justify-content: space-between; color: #e0a24b; }
.capture-heading button { border: 0; background: transparent; color: #aab3ae; font: inherit; }
.capture-preview { width: 100%; max-height: 42vh; object-fit: contain; background: #080d10; }
.capture-panel label, .capture-status { color: #aab3ae; }
.capture-panel textarea { resize: vertical; padding: 10px; border: 1px solid #66705f; background: #111821; color: #eef0e8; font: inherit; }
.capture-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.capture-actions button { min-height: 44px; border: 1px solid #66705f; background: #24292c; color: #eef0e8; font: 10px ui-monospace, monospace; }
.personal-waypoint-row { display: grid; grid-template-columns: 1fr auto auto; gap: 5px; grid-column: 1 / -1; }
.personal-waypoint-row button { min-height: 44px; }
.personal-waypoint-row .waypoint-manage { width: 44px; padding: 0; text-align: center; }
.developer-panel {
  position: fixed;
  z-index: 24;
  right: max(24px, env(safe-area-inset-right));
  top: calc(70px + env(safe-area-inset-top));
  max-height: calc(100dvh - 94px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  width: min(320px, calc(100vw - 48px));
  display: grid;
  gap: 14px;
  padding: 16px;
  font: 11px/1.45 ui-monospace, monospace;
  letter-spacing: .08em;
}
.developer-panel[hidden] { display: none; }
.settings-heading { display: flex; justify-content: space-between; align-items: center; }
.settings-heading strong { color: #e0a24b; letter-spacing: .18em; }
.settings-heading button {
  min-height: 44px;
  min-width: 44px;
  border: 0;
  background: transparent;
  color: #aab3ae;
  font: inherit;
}
.developer-panel label { display: flex; justify-content: space-between; gap: 12px; color: #d9ded8; }
.developer-panel output { color: #e0a24b; }
.developer-panel input[type='range'] { width: 100%; accent-color: #e0a24b; }
.developer-panel .settings-check { justify-content: flex-start; align-items: center; }
.developer-panel input[type='checkbox'] { accent-color: #e0a24b; }
.developer-panel p { margin: 0; color: #a3ada8; font-size: 10px; line-height: 1.5; }

.vehicle-fuel-gauge {
  position: fixed;
  right: 24px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 20;
  width: 208px;
  padding: 12px 16px 8px;
  color: #eff0e9;
  background: rgba(13, 20, 24, .92);
  border-left: 2px solid #e0a24b;
  font: 14px/1.4 ui-monospace, monospace;
  pointer-events: none;
}
.vehicle-fuel-gauge[hidden] { display: none; }
.fuel-track { height: 9px; margin-top: 8px; background: #364248; }
.fuel-track span { display: block; height: 100%; width: var(--fuel-level, 0%); background: #e0a24b; }
.fuel-scale { display: flex; justify-content: space-between; margin-top: 3px; font-size: 11px; }
.vehicle-fuel-gauge[data-low="true"] strong { color: #ffb36c; }
@media (max-width: 680px) {
  .vehicle-fuel-gauge { right: 16px; bottom: calc(160px + env(safe-area-inset-bottom)); width: 172px; }
}
.prompt {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  border-top: 1px solid #e0a24b;
  padding: 8px 18px;
  background: rgba(13, 20, 24, .72);
  color: #eef0e8;
  font: 10px ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: opacity .25s;
  pointer-events: none;
}

.gamepad-hint {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: calc(136px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 6px 14px;
  background: rgba(13, 20, 24, .72);
  color: #eef0e8;
  font: 10px ui-monospace, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .5s;
}
.gamepad-hint[data-leaving="true"] { opacity: 0; }

.monolith-panel {
  position: fixed;
  z-index: 21;
  left: 24px;
  bottom: calc(104px + env(safe-area-inset-bottom));
  width: min(330px, calc(100vw - 48px));
  padding: 10px 12px;
  border-left: 2px solid #e0a24b;
  background: rgba(13, 20, 24, .93);
  box-shadow: 0 12px 36px rgba(4, 8, 10, .4);
  font: 11px/1.45 ui-monospace, monospace;
}
.monolith-panel[hidden], .monolith-panel [hidden] { display: none; }
.monolith-heading { display: flex; justify-content: space-between; gap: 12px; color: #e0a24b; letter-spacing: .1em; }
.monolith-heading span { color: #aab3ae; font-size: 9px; text-align: right; }
.monolith-panel p { margin: 6px 0; color: #cbd2ce; overflow-wrap: anywhere; }
.monolith-progress { height: 9px; overflow: hidden; background: #2c3638; }
.monolith-progress span { display: block; width: 0; height: 100%; background: #e0a24b; transition: width .2s ease; }
.monolith-progress-label { display: flex; justify-content: space-between; margin: 4px 0 10px; color: #8d9893; font-size: 9px; letter-spacing: .1em; }
.monolith-panel button { width: 100%; min-height: 44px; border: 1px solid #e0a24b; background: rgba(224, 162, 75, .1); color: #eef0e8; font: 10px ui-monospace, monospace; letter-spacing: .12em; }
.monolith-panel button:disabled { border-color: #66705f; color: #7e8884; }
body:has(#monolith-panel:not([hidden])) > .prompt { visibility: hidden; }

.touch-controls { display: none; }

.world-layers-panel {
  position: fixed;
  z-index: 12;
  top: max(104px, calc(env(safe-area-inset-top) + 104px));
  left: 24px;
  width: min(300px, calc(100vw - 48px));
  max-height: calc(100vh - 220px);
  overflow: auto;
  border-left: 1px solid rgba(224, 162, 75, .65);
  background: rgba(13, 20, 24, .82);
  color: #eef0e8;
  font: 9px ui-monospace, monospace;
  box-shadow: 0 8px 28px rgba(4, 8, 10, .28);
}
.wonder-beta-rail .world-layers-panel {
  position: static;
  width: 100%;
  max-height: none;
  margin-top: 26px;
  font-size: 11px;
}
.world-layers-panel summary {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  align-items: center;
  min-height: 34px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}
.world-layers-panel summary::-webkit-details-marker { display: none; }
.world-layers-panel summary::before { content: '›'; color: #e0a24b; }
.world-layers-panel[open] summary::before { transform: rotate(90deg); }
.world-layers-title { color: #eef0e8; font-size: 12px; letter-spacing: .08em; }
.world-layers-build { justify-self: end; color: #aab3ae; font-size: 10px; }
.world-layers-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 0 10px 10px;
}
.world-layers-view-button,
.overture-minimap-size-button {
  min-height: 36px;
  border: 1px solid rgba(126, 136, 132, .62);
  background: rgba(26, 34, 38, .86);
  color: #aab3ae;
  font: 10px ui-monospace, monospace;
  letter-spacing: .12em;
}
.world-layers-view-button[aria-selected='true'],
.overture-minimap-size-button[aria-pressed='true'] {
  border-color: #e0a24b;
  background: rgba(224, 162, 75, .12);
  color: #eef0e8;
}
.world-layers-view-button:focus-visible,
.overture-minimap-size-button:focus-visible {
  outline: 2px solid #e0a24b;
  outline-offset: 2px;
}
.world-layers-list { margin: 0; padding: 0 10px 10px; list-style: none; }
.world-layer { padding: 9px 0; border-top: 1px solid rgba(170, 179, 174, .13); }
.world-layer-heading { display: flex; justify-content: space-between; gap: 8px; }
.world-layer-name { color: #d9ded8; }
.world-layer-state { font-weight: 700; }
.world-layer-green .world-layer-state { color: #8fc79d; }
.world-layer-amber .world-layer-state { color: #e0a24b; }
.world-layer-grey .world-layer-state { color: #7e8884; }
.world-layer-qualifier { margin-top: 4px; color: #a5afaa; font-size: 10px; line-height: 1.45; }

.overture-minimap-shell {
  position: fixed;
  z-index: 14;
  top: max(180px, calc(env(safe-area-inset-top) + 180px));
  right: 24px;
  display: grid;
  gap: 8px;
  width: 244px;
  padding: 11px;
  border-top: 1px solid rgba(224, 162, 75, .78);
  background: rgba(13, 20, 24, .9);
  box-shadow: 0 12px 38px rgba(4, 8, 10, .42);
}
.overture-minimap-shell[hidden] { display: none; }
.world-layers-panel[data-map-size='large'] .overture-minimap-shell { width: 444px; }
.overture-minimap-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.overture-minimap-title { color: #e0a24b; font: 11px ui-monospace, monospace; letter-spacing: .15em; }
.overture-minimap-north { color: #89938e; font: 9px ui-monospace, monospace; letter-spacing: .12em; }
.overture-minimap-canvas { display: block; max-width: 100%; background: #10191d; }
.overture-minimap-meta { display: grid; gap: 4px; min-width: 0; }
.overture-minimap-state {
  overflow: hidden;
  color: #d9ded8;
  font: 9px/1.4 ui-monospace, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overture-minimap-counts,
.overture-minimap-coordinate { color: #939e98; font: 9px/1.4 ui-monospace, monospace; }
.overture-minimap-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.overture-minimap-sizes[hidden] { display: none; }

.globe-panel {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(280px, 440px) minmax(320px, 680px);
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 8vw, 130px);
  padding: 8vw;
  background: radial-gradient(circle at 70% 50%, rgba(82, 101, 94, .28), transparent 42%), rgba(9, 14, 18, .94);
}
.globe-panel[hidden] { display: none; }
.globe-copy { max-width: 430px; }
.globe-kicker, .route-status { color: #e0a24b; font: 10px ui-monospace, monospace; letter-spacing: .18em; }
.globe-copy h1 { margin: 16px 0 12px; font-size: clamp(42px, 6vw, 76px); font-weight: 500; letter-spacing: -.04em; }
.globe-copy p { color: #aab3ae; line-height: 1.6; }
.globe-copy button {
  display: block;
  width: 100%;
  margin-top: 12px;
  border: 1px solid #66705f;
  border-radius: 2px;
  padding: 13px 15px;
  background: rgba(36, 41, 44, .72);
  color: #eef0e8;
  text-align: left;
  font: 10px ui-monospace, monospace;
  letter-spacing: .12em;
}
.globe-copy button[hidden] { display: none; }
.globe-copy button:first-of-type { border-color: #e0a24b; }
.fast-travel-destinations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 10px;
  max-height: min(38vh, 320px);
  overflow: auto;
  overscroll-behavior: contain;
}
.coordinate-travel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.coordinate-travel label { color: #aab3ae; font: 9px ui-monospace, monospace; letter-spacing: .1em; }
.coordinate-travel input { box-sizing: border-box; width: 100%; margin-top: 4px; background: #111815; color: #eef0e8; border: 1px solid #3b4740; padding: 8px; }
.coordinate-travel button { grid-column: 1 / -1; }
.fast-travel-destinations button {
  margin: 0;
  min-height: 44px;
  padding: 10px 12px;
  text-align: left;
}
.fast-travel-destinations button[aria-current="true"] { border-color: #eef0e8; }
.fast-travel-destinations button[data-loading="true"] { border-color: #e0a24b; color: #e0a24b; }
.fast-travel-group-label {
  grid-column: 1 / -1;
  margin-top: 6px;
  color: #8d9893;
  font: 9px ui-monospace, monospace;
  letter-spacing: .14em;
}
.route-status { margin-top: 20px; color: #8d9893; }
.fast-travel-globe-shell {
  position: relative;
  width: min(45vw, 580px);
  aspect-ratio: 1;
  min-width: 320px;
  justify-self: center;
  filter: drop-shadow(0 30px 70px rgba(0, 8, 14, .72));
}
.fast-travel-globe-shell::before {
  content: '';
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  background: rgba(58, 111, 132, .12);
  box-shadow: 0 0 90px rgba(73, 148, 170, .2);
  pointer-events: none;
}
.fast-travel-globe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  outline: none;
  cursor: grab;
  touch-action: none;
}
.fast-travel-globe-canvas:active { cursor: grabbing; }
.fast-travel-globe-canvas:focus-visible { outline: 2px solid #e0a24b; outline-offset: 5px; border-radius: 50%; }
.fast-travel-globe-hint,
.fast-travel-globe-status {
  position: absolute;
  right: 0;
  left: 0;
  color: #89928e;
  text-align: center;
  font: 9px ui-monospace, monospace;
  letter-spacing: .12em;
  pointer-events: none;
}
.fast-travel-globe-hint { bottom: 1%; }
.fast-travel-globe-status { top: 1%; color: #b8c5bf; }

body > footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: calc(25px + env(safe-area-inset-bottom));
  padding: 8px calc(150px + env(safe-area-inset-right)) env(safe-area-inset-bottom) 18px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #89928e;
  background: rgba(10, 15, 18, .68);
  pointer-events: none;
}

@media (max-width: 680px) {
  .identity { top: max(14px, env(safe-area-inset-top)); left: 14px; }
  .god-mode-hud { top: max(58px, calc(env(safe-area-inset-top) + 58px)); left: 14px; }
  .land-cover-hud { top: max(96px, calc(env(safe-area-inset-top) + 96px)); left: 14px; max-width: calc(100vw - 28px); font-size: 10px; }
  .wonder-beta-rail {
    top: max(90px, calc(env(safe-area-inset-top) + 90px));
    right: 14px;
    bottom: calc(300px + env(safe-area-inset-bottom));
    left: 14px;
    width: auto;
  }
  .beta-build-status { font-size: 11px; }
  .beta-release-history:not([open]) { margin-bottom: 0; }
  .telemetry { top: auto; right: 12px; left: 12px; bottom: calc(164px + env(safe-area-inset-bottom)); width: auto; display: grid; grid-template-columns: 1fr 1fr; padding: 8px 10px; }
  .telemetry div { grid-template-columns: 54px 1fr; }
  .monolith-panel { left: 12px; bottom: calc(165px + env(safe-area-inset-bottom)); width: min(340px, calc(100vw - 24px)); max-height: min(170px, calc(100dvh - 245px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); overflow: auto; }
  .developer-panel { left: 12px; right: 12px; top: calc(62px + env(safe-area-inset-top)); bottom: auto; width: auto; max-height: calc(100dvh - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .project-panel {
    top: max(10px, env(safe-area-inset-top)); right: 10px; bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100vw - 20px); padding: 15px;
  }
  .project-heading strong { font-size: 15px; }
  .project-tabs { grid-template-columns: 1fr; }
  .project-tabs button { min-height: 48px; font-size: 12px; }
  .project-item { padding: 14px 0; }
  .project-item h3 { font-size: 16px; }
  .project-item p { font-size: 14px; line-height: 1.55; }
  .capture-panel { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
  .capture-actions { grid-template-columns: 1fr; }
  body > .world-layers-panel {
    top: max(92px, calc(env(safe-area-inset-top) + 92px));
    left: 12px;
    width: min(280px, calc(100vw - 24px));
    max-height: calc(100vh - 390px);
  }
  .overture-minimap-shell,
  .world-layers-panel[data-map-size='large'] .overture-minimap-shell {
    top: max(90px, calc(env(safe-area-inset-top) + 90px));
    right: 12px;
    width: min(444px, calc(100vw - 24px));
    max-height: calc(100vh - 280px);
    overflow: auto;
  }
  .world-layers-panel[data-map-size='large'] .overture-minimap-canvas {
    width: 100% !important;
    height: auto !important;
  }
  .hud-visibility-toggle { right: 10px; }
  body.wonder-hud-hidden .hud-visibility-toggle { right: max(10px, env(safe-area-inset-right)); }
  .prompt { bottom: calc(290px + env(safe-area-inset-bottom)); white-space: nowrap; }
  .prompt[data-flight='true'],
  .prompt[data-car-warning='true'] {
    white-space: normal;
    width: max-content;
    max-width: calc(100vw - 28px);
    box-sizing: border-box;
    text-align: center;
    line-height: 1.5;
  }
  body > footer span:last-child { display: none; }
  .home-compass[data-variant="compass"] { bottom: calc(62px + env(safe-area-inset-bottom)); }
  .touch-controls {
    position: fixed;
    z-index: 10;
    left: 14px;
    right: 14px;
    bottom: calc(37px + env(safe-area-inset-bottom));
    display: flex;
    align-items: end;
    justify-content: space-between;
    pointer-events: none;
  }
  .touch-stick {
    position: relative;
    width: 112px;
    height: 112px;
    border: 1px solid rgba(238, 240, 232, .42);
    border-radius: 50%;
    background: rgba(13, 20, 24, .48);
    pointer-events: auto;
    touch-action: none;
  }
  .touch-stick-ring { position: absolute; inset: 25px; border: 1px solid rgba(224, 162, 75, .38); border-radius: 50%; }
  .touch-stick-knob { position: absolute; left: 39px; top: 39px; width: 32px; height: 32px; border: 1px solid #e0a24b; border-radius: 50%; background: rgba(224, 162, 75, .25); }
  .touch-stick-label { position: absolute; left: 0; right: 0; bottom: 12px; color: #aab3ae; text-align: center; font: 8px ui-monospace, monospace; letter-spacing: .16em; }
  .touch-actions { display: grid; grid-template-columns: 58px 68px; gap: 7px; pointer-events: auto; }
  .touch-actions button[hidden] { display: none; }
  .touch-actions button {
    min-height: 49px;
    border: 1px solid rgba(170, 179, 174, .55);
    border-radius: 2px;
    background: rgba(13, 20, 24, .7);
    color: #eef0e8;
    font: 8px ui-monospace, monospace;
    letter-spacing: .08em;
    touch-action: none;
  }
  .touch-actions .touch-primary { border-color: #e0a24b; color: #e0a24b; }
  .globe-panel {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 14px;
    padding: max(16px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .globe-copy { width: 100%; max-width: none; }
  .globe-copy h1 { margin: 8px 0 6px; font-size: 34px; }
  .globe-copy p { margin: 0; font-size: 12px; line-height: 1.4; }
  .fast-travel-destinations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 220px;
    margin: 10px 0 8px;
  }
  .fast-travel-globe-shell { grid-row: 1; width: min(54vw, 210px); min-width: 180px; }
  .fast-travel-globe-hint { font-size: 7px; letter-spacing: .08em; }
}

@media (pointer: coarse) and (orientation: landscape) {
  .monolith-panel {
    left: 50%; transform: translateX(-50%);
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: min(340px, calc(100vw - 320px));
    max-height: min(160px, calc(100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prompt { transition: none; }
}

/* Fixed equipment, visually part of the game's amber and slate controls. */
.global-radio-controls {
  position: fixed; z-index: 80; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 24px)); box-sizing: border-box;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; padding: 18px;
  background: #0d1418; color: #eef0e8; border: 1px solid #66705f; border-radius: 5px;
  box-shadow: 0 12px 45px #0009;
  font: 17px/1.3 'Avenir Next Condensed', 'Arial Narrow', sans-serif;
}
.global-radio-controls[hidden], .global-radio-author[hidden] { display: none; }
.global-radio-controls header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.global-radio-controls h2 { margin: 0; font-size: 21px; overflow-wrap: anywhere; }
.global-radio-controls p { margin: 10px 0; }
.global-radio-controls button, .global-radio-author button {
  min-height: 44px; padding: 8px 12px; font: inherit; color: #eef0e8;
  background: #111821; border: 1px solid #66705f; border-radius: 3px; touch-action: manipulation;
}
.global-radio-controls button:disabled, .global-radio-author button:disabled { opacity: .5; }
.global-radio-controls :focus-visible, .global-radio-author :focus-visible { outline: 2px solid #e0a24b; outline-offset: 3px; }
.global-radio-tuner { display: grid; grid-template-columns: 1fr 110px 1fr; gap: 8px; margin: 6px 0 14px; }
.global-radio-tuner input { min-width: 0; width: 100%; box-sizing: border-box; padding: 5px; text-align: center;
  color: #e0a24b; background: #111821; border: 1px solid #e0a24b; border-radius: 3px; font-family: inherit; font-size: 32px; line-height: 1.2; }
.global-radio-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.global-radio-consent { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; color: #aab3ae; }
.global-radio-consent[hidden] { display: none; }
.global-radio-consent input { flex: 0 0 22px; width: 22px; height: 22px; accent-color: #e0a24b; }
#global-radio-broadcast { width: 100%; border-color: #e0a24b; color: #e0a24b; }
#global-radio-error { color: #e0a24b; }
#global-radio-timer, #global-radio-selected { color: #aab3ae; }
.global-radio-author { margin-top: 14px; padding-top: 10px; border-top: 1px solid #66705f;
  font: 16px/1.4 'Avenir Next Condensed', 'Arial Narrow', sans-serif; color: #eef0e8; }
.global-radio-author h3 { margin: 0; font-size: 18px; }
.global-radio-author p { margin: 8px 0; font: inherit; line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .global-radio-controls { padding: 12px; }
  .global-radio-tuner { grid-template-columns: 1fr 90px 1fr; }
}
.memory-note-piece { padding: 8px 10px; border: 1px solid #8a7a5c; background: #f8f1de; color: #2a241a; font-family: Georgia, 'Times New Roman', serif; }
.memory-note-missing { background: transparent; border-style: dashed; color: inherit; opacity: .7; font-style: italic; }

/* ---- Controller-first HUD (card 42c5a4e6, prototype A: the four-way cross) ---- */
:root { --ui-scale: 1; --cross-surface: rgba(17, 28, 31, .94); --cross-rule: rgba(151, 177, 164, .38); --cross-bone: #e7e3d5; --cross-muted: #abb8b1; }
body.large-text { --ui-scale: 1.3; }
body.large-text .prompt { font-size: calc(1em * 1.25); }
.input-glyph { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.7em; padding: 0 .4em;
  border: 1px solid var(--cross-bone); border-radius: .35em; font-size: .85em; line-height: 1; font-weight: 500; color: var(--cross-bone);
  background: rgba(0, 0, 0, .25); white-space: nowrap; vertical-align: middle; }
.input-glyph-round { width: 1.7em; padding: 0; border-radius: 50%; }
.input-glyph-pad { border-radius: .3em; }
.input-glyph-word { font-size: .75em; letter-spacing: .04em; }

.hud-buttons { position: fixed; z-index: 30; top: max(14px, env(safe-area-inset-top)); right: max(60px, calc(env(safe-area-inset-right) + 60px));
  display: flex; gap: 6px; }
.hud-buttons button { min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--cross-rule); border-radius: 22px;
  background: var(--cross-surface); color: var(--cross-bone); font: calc(13px * var(--ui-scale)) "Avenir Next", Avenir, sans-serif; cursor: pointer; }
.hud-buttons button[hidden] { display: none; }
/* Nothing to pause or open until the world starts. */
body:has(#start-surface:not([hidden])) .hud-buttons { display: none; }
.hud-buttons button[aria-expanded="true"], .hud-buttons button:hover:not(:disabled) { border-color: var(--cross-bone); }
.hud-buttons button:focus-visible { outline: 2px solid #f0c98f; outline-offset: 2px; }
/* A controller or keyboard player has buttons for these; the chips stay for mouse and touch. */
html:is([data-input-device="pad"], [data-input-device="keys"]) .hud-buttons #hud-pack,
html:is([data-input-device="pad"], [data-input-device="keys"]) .hud-buttons #navigation-toggle { display: none; }

.action-focus { position: fixed; z-index: 13; left: 50%; top: calc(50% + 22px); transform: translateX(-50%); display: grid; justify-items: center;
  gap: 3px; pointer-events: none; text-align: center; font: calc(14px * var(--ui-scale)) "Avenir Next", Avenir, sans-serif; color: var(--cross-bone);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7); white-space: nowrap; }
.action-focus[hidden] { display: none; }
.action-focus strong { font-weight: 500; }
.action-focus-note { font-size: .82em; color: var(--cross-muted); }
.action-focus-warn { color: #e0a24b; }
.action-focus-prompt { display: inline-flex; align-items: center; gap: 6px; font-size: .95em; }
.action-focus-prompt[data-disabled="true"] { opacity: .5; }

.action-cross { position: fixed; z-index: 16; left: 50%; top: 50%; width: 0; height: 0; }
.action-cross[hidden] { display: none; }
.action-cross-arm { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: calc(96px * var(--ui-scale)); min-height: 48px; padding: 10px 14px; border: 1px solid var(--cross-rule); border-radius: 12px;
  background: var(--cross-surface); color: #eef0e8; font: calc(15px * var(--ui-scale)) "Avenir Next", Avenir, sans-serif; white-space: nowrap;
  cursor: pointer; animation: cross-rise .18s ease both; }
.action-cross-arm[data-dir="up"] { top: calc(-78px * var(--ui-scale)); }
.action-cross-arm[data-dir="down"] { top: calc(78px * var(--ui-scale)); }
.action-cross-arm[data-dir="left"] { left: calc(-132px * var(--ui-scale)); }
.action-cross-arm[data-dir="right"] { left: calc(132px * var(--ui-scale)); }
.action-cross-arm:hover:not(:disabled), .action-cross-arm:focus-visible { border-color: var(--cross-bone); background: #1d2d30; outline: none; }
.action-cross-arm:disabled { opacity: .45; cursor: default; }
.action-cross-arm.action-cross-fired { background: var(--cross-bone); color: #111821; }
.action-cross-title { position: absolute; top: calc(122px * var(--ui-scale)); transform: translateX(-50%); color: var(--cross-muted);
  font: calc(12px * var(--ui-scale)) "Avenir Next", Avenir, sans-serif; white-space: nowrap; pointer-events: none; }
@keyframes cross-rise { from { opacity: 0; margin-top: 6px; } to { opacity: 1; margin-top: 0; } }

.action-hints { position: fixed; z-index: 11; right: max(12px, env(safe-area-inset-right)); bottom: calc(34px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; max-width: calc(100vw - 24px); pointer-events: none;
  color: var(--cross-muted); font: calc(13px * var(--ui-scale)) "Avenir Next", Avenir, sans-serif; text-shadow: 0 1px 6px #111821; }
.action-hints span { display: inline-flex; align-items: center; gap: 6px; }
.action-hints:empty { display: none; }

.pause-menu { position: fixed; inset: 0; z-index: 40; display: grid; place-items: start end;
  padding: max(80px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 16px 16px; background: rgba(8, 12, 16, .62); }
.pause-menu[hidden] { display: none; }
.pause-panel { width: min(520px, 100%); max-height: calc(100dvh - 112px); overflow: auto; padding: 20px;
  font: calc(15px * var(--ui-scale)) "Avenir Next", Avenir, sans-serif; }
.pause-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -6px 0 4px; }
.pause-panel h2 { margin: 0; color: var(--cross-bone); font-size: 1em; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.pause-sub { margin: 0 0 16px; color: var(--cross-muted); font-size: .86em; line-height: 1.45; }
.pause-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; margin: 0 0 8px;
  padding: 10px 14px; border: 1px solid var(--cross-rule); border-radius: 10px; background: transparent; color: inherit; font: inherit;
  text-align: left; cursor: pointer; box-sizing: border-box; }
.pause-row:hover, .pause-row:focus-visible, .pause-row:focus-within, html[data-gamepad-focus] .pause-row:focus { border-color: var(--cross-bone);
  background: #1b2b2e; outline: none; box-shadow: 0 0 0 2px var(--cross-bone) inset; }
.pause-row-value { color: var(--cross-bone); }
.pause-slider input[type="range"] { flex: 1; max-width: 160px; accent-color: var(--cross-bone); }
.pause-slider input[type="range"]:focus { outline: none; }
.pause-hints { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; color: var(--cross-muted); font-size: .8em; }
.pause-hints span { display: inline-flex; align-items: center; gap: 6px; }
.pause-foot { margin: 12px 0 0; color: var(--cross-muted); font-size: .8em; line-height: 1.45; }
.pause-credits { color: #f5ce96; }

.developer-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.developer-actions button { position: static; min-height: 44px; margin: 0; padding: 8px 11px; }
.navigation-heading-actions { display: flex; gap: 6px; align-items: center; }
.navigation-heading-actions button[hidden] { display: none; }
.pack-voice:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .action-cross-arm { animation: none; } }
@media (max-width: 680px) {
  .hud-buttons { top: max(12px, env(safe-area-inset-top)); right: 50px; gap: 4px; }
  .hud-buttons button { padding: 0 10px; }
  .pause-menu { place-items: end stretch; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
  .pause-panel { width: auto; max-height: min(72dvh, 660px); }
  .action-cross-arm[data-dir="left"] { left: calc(-96px * var(--ui-scale)); }
  .action-cross-arm[data-dir="right"] { left: calc(96px * var(--ui-scale)); }
  .action-cross-arm { min-width: 84px; }
  .action-hints { bottom: calc(230px + env(safe-area-inset-bottom)); }
}