/* THE REAL MOON WALK — retro mission HUD */
:root {
  --bg: #05060a;
  --ink: #c8d4e0;
  --dim: #8593a6;           /* lightened from #66788a so 7-10px labels clear WCAG AA on --bg */
  --amber: #ffc53d;
  --cyan: #7fe0ff;
  --line: rgba(127, 224, 255, 0.22);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  /* notch / home-indicator insets (0 on non-notched / desktop) */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); font-family: var(--mono); color: var(--ink); }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* boot */
#boot { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: var(--bg); transition: opacity 1s ease; pointer-events: none; }
#boot.done { opacity: 0; }
.boot-inner { text-align: center; width: min(420px, 80vw); }
.boot-title { font-size: 20px; letter-spacing: 0.4em; text-indent: 0.4em; color: var(--cyan); text-shadow: 0 0 20px rgba(127, 224, 255, 0.4); }
.boot-sub { margin-top: 10px; font-size: 9px; letter-spacing: 0.3em; color: var(--dim); }
.boot-sub2 { margin-top: 6px; font-size: 8px; letter-spacing: 0.2em; color: #7e8ea2; }
.boot-bar { margin-top: 26px; height: 2px; background: rgba(127, 224, 255, 0.25); }
#boot-fill { height: 100%; width: 0%; background: var(--amber); box-shadow: 0 0 10px rgba(255, 197, 61, 0.7); transition: width 0.2s ease; }
/* indeterminate until main.js writes the first inline width (style attr) */
#boot-fill:not([style]) { width: 30%; animation: bootslide 1.2s ease-in-out infinite; }
@keyframes bootslide { 0% { margin-left: 0; } 50% { margin-left: 70%; } 100% { margin-left: 0; } }
.boot-msg { margin-top: 12px; font-size: 9px; letter-spacing: 0.22em; color: var(--dim); }
.boot-mods { margin-top: 7px; font-size: 8px; letter-spacing: 0.22em; color: #7e8ea2; }

/* hud */
#hud { position: fixed; top: calc(14px + var(--sat)); left: calc(16px + var(--sal)); z-index: 20; font-size: 10px; line-height: 1.9; letter-spacing: 0.1em; color: var(--dim); text-shadow: 0 1px 2px #000; pointer-events: none; transition: opacity 0.3s; }
.h-title { color: var(--cyan); letter-spacing: 0.2em; }
.h-title span { color: var(--amber); font-size: 9px; margin-left: 8px; }
.h-row b { color: var(--ink); font-weight: 400; }
body.hud-hidden #hud, body.hud-hidden #hint, body.hud-hidden #touch-ui { opacity: 0; }
body.hud-hidden #labels { opacity: 0; pointer-events: none; }
#hint { position: fixed; right: calc(16px + var(--sar)); bottom: calc(12px + var(--sab)); z-index: 20; font-size: 10px; letter-spacing: 0.18em; color: #7e8ea2; text-shadow: 0 1px 2px #000; pointer-events: none; transition: opacity 0.3s; }

/* mode readout + big SPD/ALT figures (the zoom is the fuel gauge now) */
#hud-mode b { color: var(--amber); }
.h-row b.big { font-size: 13px; color: var(--ink); }

/* touch controls (coarse pointers only) */
#touch-ui { display: none; position: fixed; right: calc(16px + var(--sar)); bottom: calc(64px + var(--sab)); z-index: 25; flex-direction: column; gap: 12px; transition: opacity 0.3s; }
#touch-ui button {
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(10, 16, 24, 0.55);
  color: var(--cyan); font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
  -webkit-tap-highlight-color: transparent; touch-action: none;
}
#touch-ui button[hidden] { display: none; }
#touch-ui button:active, #touch-ui button.on { background: rgba(255, 197, 61, 0.25); color: var(--amber); border-color: rgba(255, 197, 61, 0.5); }

/* dynamic virtual stick: spawns where the left-half finger lands */
#stick { position: fixed; left: 0; top: 0; z-index: 26; width: 0; height: 0; pointer-events: none; }
#stick[hidden] { display: none; }
#stick-base { position: absolute; left: 0; top: 0; width: 112px; height: 112px; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--line); background: rgba(10, 16, 24, 0.35); }
#stick-base i { position: absolute; width: 0; height: 0; border: 5px solid transparent; opacity: 0.45; }
#stick-base i.u { left: 50%; top: 3px; margin-left: -5px; border-bottom-color: var(--cyan); }
#stick-base i.d { left: 50%; bottom: 3px; margin-left: -5px; border-top-color: var(--cyan); }
#stick-base i.l { left: 3px; top: 50%; margin-top: -5px; border-right-color: var(--cyan); }
#stick-base i.r { right: 3px; top: 50%; margin-top: -5px; border-left-color: var(--cyan); }
#stick-base.u i.u, #stick-base.d i.d, #stick-base.l i.l, #stick-base.r i.r { opacity: 1; }
#stick-base.u i.u { border-bottom-color: var(--amber); }
#stick-base.d i.d { border-top-color: var(--amber); }
#stick-base.l i.l { border-right-color: var(--amber); }
#stick-base.r i.r { border-left-color: var(--amber); }
#stick-knob { position: absolute; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(127, 224, 255, 0.22); border: 1px solid var(--cyan); box-shadow: 0 0 14px rgba(127, 224, 255, 0.25); }

/* first-visit controls guide */
#guide { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(4, 7, 11, 0.62); }
#guide[hidden] { display: none; }
.g-zones { display: flex; gap: 18px; width: min(560px, 86vw); }
.g-zone { flex: 1; border: 1px dashed var(--line); border-radius: 8px; padding: 26px 10px 16px; text-align: center; color: var(--cyan); background: rgba(127, 224, 255, 0.04); }
.g-stick { width: 54px; height: 54px; margin: 0 auto; border: 1px solid var(--cyan); border-radius: 50%; position: relative; opacity: 0.8; }
.g-stick::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--cyan); opacity: 0.7; }
.g-look { width: 54px; height: 54px; margin: 0 auto; font-size: 26px; line-height: 54px; color: var(--cyan); opacity: 0.8; }
.g-cap { margin-top: 12px; font-size: 10px; letter-spacing: 0.15em; }
.g-sub { margin-top: 5px; font-size: 8px; letter-spacing: 0.12em; color: var(--dim); }
#guide-line { margin-top: 22px; padding: 0 20px; font-size: 9px; line-height: 2; letter-spacing: 0.14em; color: var(--ink); text-align: center; }
#guide-tap { margin-top: 20px; font-size: 9px; letter-spacing: 0.2em; color: var(--amber); animation: gblink 1.4s infinite; }
@keyframes gblink { 50% { opacity: 0.25; } }
body.hud-hidden #guide { opacity: 0; }

@media (pointer: coarse) {
  #hint { letter-spacing: 0.08em; left: calc(10px + var(--sal)); right: auto; bottom: calc(10px + var(--sab)); font-size: 8px; }
  #touch-ui { display: flex; }
}
body.force-touch #touch-ui { display: flex; }

@media (max-width: 560px) {
  .g-cap { font-size: 8px; letter-spacing: 0.08em; }
  .g-sub { font-size: 7px; letter-spacing: 0.04em; }
  #guide-line { font-size: 8px; letter-spacing: 0.08em; }
}

@media (max-width: 480px) {
  #hud { font-size: 8px; letter-spacing: 0.05em; line-height: 1.8; top: calc(10px + var(--sat)); left: calc(12px + var(--sal)); }
  #hint { max-width: 70vw; text-align: left; }
}

/* narrow screens: the HUD must never run under the top-right buttons —
 * cap its width (long rows clip with an ellipsis, shedding the ELEV tail
 * first); the buttons themselves wrap lower down (after the coarse rule) */
@media (max-width: 560px) {
  #hud { max-width: calc(100vw - 180px); }
  #hud .h-row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* fatal */
#fatal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(2, 4, 7, 0.92); }
#fatal[hidden] { display: none; }
#fatal-title { font-size: 18px; letter-spacing: 0.5em; text-indent: 0.5em; color: var(--amber); text-align: center; }
#fatal-msg { margin-top: 14px; font-size: 10px; line-height: 2; letter-spacing: 0.15em; color: var(--dim); white-space: pre-wrap; text-align: center; }

/* top-right mode buttons (LOCATIONS) */
#menu-btns { position: fixed; top: calc(14px + var(--sat)); right: calc(16px + var(--sar)); z-index: 25; display: flex; gap: 8px; transition: opacity 0.3s; }
#menu-btns button {
  border: 1px solid var(--line); background: rgba(10, 16, 24, 0.55);
  color: var(--cyan); font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em;
  padding: 8px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#menu-btns button:hover { background: rgba(127, 224, 255, 0.14); }
#menu-btns button:active { background: rgba(255, 197, 61, 0.25); color: var(--amber); border-color: rgba(255, 197, 61, 0.5); }
#menu-btns button[hidden] { display: none; }
body.hud-hidden #menu-btns { opacity: 0; pointer-events: none; }
@media (pointer: coarse) {
  #menu-btns button { padding: 12px 16px; }
}

/* band-driven visibility: JUMP/DOWN only where legs and the pack work */
body[data-mode="orbit"] #touch-ui { display: none; }

/* tour route picker (the fly-to picker is #menu now) */
#tours { position: fixed; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center; background: rgba(4, 7, 11, 0.72); }
#tours[hidden] { display: none; }
#tours-box { position: relative; width: min(520px, 92vw); max-height: 82vh; overflow-y: auto; border: 1px solid var(--line); background: rgba(6, 10, 16, 0.92); padding: 18px; }
#tours-title { color: var(--cyan); font-size: 11px; letter-spacing: 0.2em; text-align: center; margin-bottom: 14px; }
.route-card { display: block; width: 100%; text-align: left; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--line); background: rgba(127, 224, 255, 0.04); color: var(--ink); font-family: var(--mono); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.route-card:hover { background: rgba(127, 224, 255, 0.12); }
.route-card b { color: var(--cyan); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.route-card .en { color: var(--dim); font-size: 9px; margin-left: 8px; letter-spacing: 0.1em; text-transform: uppercase; }
.route-card p { margin-top: 5px; color: var(--dim); font-size: 9px; letter-spacing: 0.08em; line-height: 1.7; }
.route-card .tag { float: right; color: var(--amber); font-size: 8px; letter-spacing: 0.15em; }

/* tour cruise bar (top centre): route + progress + pause/speed/exit */
#tour-bar { position: fixed; top: calc(14px + var(--sat)); left: 50%; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid var(--line); background: rgba(6, 10, 16, 0.82); font-size: 10px; letter-spacing: 0.12em; white-space: nowrap; }
/* 561-820px: full-width top-right menu buttons reach the centred cruise bar —
 * drop the bar below them (≤560 already does this via the block below) */
@media (min-width: 561px) and (max-width: 820px) { #tour-bar { top: calc(104px + var(--sat)); } }
#tour-bar[hidden] { display: none; }
#tour-bar-name { color: var(--cyan); }
#tour-bar-prog { color: var(--dim); font-size: 9px; }
#tour-bar button { border: 1px solid var(--line); background: rgba(10, 16, 24, 0.55); color: var(--cyan); font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; padding: 4px 9px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
#tour-bar button:hover { background: rgba(127, 224, 255, 0.14); }
#tour-bar button:active { background: rgba(255, 197, 61, 0.25); color: var(--amber); }
#tour-bar button.on { color: var(--amber); border-color: rgba(255, 197, 61, 0.5); }
body.hud-hidden #tour-bar { opacity: 0; pointer-events: none; }
#tour-bar { transition: opacity 0.3s; }

/* tour stop info card (bottom centre, terminal style, input-transparent) */
#tour-card { position: fixed; bottom: 56px; left: 50%; transform: translateX(-50%); z-index: 30; width: min(470px, 92vw); padding: 13px 16px 12px; border: 1px solid var(--line); background: rgba(6, 10, 16, 0.88); pointer-events: none; }
#tour-card[hidden] { display: none; }
.tc-k { color: var(--dim); font-size: 8px; letter-spacing: 0.18em; }
.tc-title { margin-top: 6px; color: var(--cyan); font-size: 14px; letter-spacing: 0.12em; }
.tc-title span { color: var(--dim); font-size: 9px; margin-left: 8px; letter-spacing: 0.1em; }
.tc-meta { margin-top: 5px; color: var(--amber); font-size: 9px; letter-spacing: 0.1em; }
.tc-note { margin-top: 7px; color: var(--ink); font-size: 10px; line-height: 1.8; letter-spacing: 0.06em; }
.tc-org { margin-top: 7px; color: var(--dim); font-size: 8px; line-height: 1.7; letter-spacing: 0.06em; }
@media (pointer: coarse) {
  #tour-card { bottom: 142px; }
}
@media (max-width: 560px) {
  #tour-bar { top: calc(104px + var(--sat)); max-width: 94vw; overflow: hidden; font-size: 9px; gap: 7px; }
  #tour-bar-name { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
  #tour-card { padding: 10px 12px; }
  .tc-title { font-size: 12px; }
  .tc-note { font-size: 9px; }
}

/* region loading veil */
#veil { position: fixed; inset: 0; z-index: 38; display: flex; align-items: center; justify-content: center; background: rgba(4, 7, 11, 0.78); }
#veil[hidden] { display: none; }
.veil-inner { width: min(360px, 80vw); text-align: center; }
#veil-msg { font-size: 10px; letter-spacing: 0.22em; color: var(--dim); margin-bottom: 14px; }
#veil-fill { height: 100%; width: 0%; background: var(--amber); box-shadow: 0 0 10px rgba(255, 197, 61, 0.7); transition: width 0.2s ease; }

/* transient notice */
#toast { position: fixed; top: calc(64px + var(--sat)); left: 50%; transform: translateX(-50%); z-index: 36; padding: 9px 18px; border: 1px solid var(--line); background: rgba(6, 10, 16, 0.85); color: var(--ink); font-size: 10px; letter-spacing: 0.14em; max-width: min(92vw, 640px); text-align: center; transition: opacity 0.4s; }
#toast[hidden] { display: none; }

@media (max-width: 480px) {
  #menu-btns { top: calc(10px + var(--sat)); right: calc(12px + var(--sar)); }
}

/* narrow screens: buttons wrap into a right-hand band beside the capped
 * HUD (kept after the coarse-pointer padding so the small size wins) */
@media (max-width: 560px) {
  #menu-btns { flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 156px; }
  #menu-btns button { padding: 10px 10px; font-size: 9px; letter-spacing: 0.08em; }
}

/* ---------------- museum mode (sights.js) ---------------- */

/* VIEW EXHIBIT offer (surface band, near a curated sight) */
#exhibit-cta { position: fixed; left: calc(16px + var(--sal)); top: 132px; z-index: 24; display: flex; gap: 6px; transition: opacity 0.3s; }
#exhibit-cta[hidden] { display: none; }
#exhibit-cta button {
  border: 1px solid rgba(255, 197, 61, 0.5); background: rgba(10, 16, 24, 0.6);
  color: var(--amber); font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em;
  padding: 7px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
#exhibit-cta button:hover { background: rgba(255, 197, 61, 0.18); }
#exhibit-cta #exhibit-cta-x { padding: 7px 9px; color: var(--dim); border-color: var(--line); }
body.hud-hidden #exhibit-cta { opacity: 0; pointer-events: none; }
@media (max-width: 480px) { #exhibit-cta { top: 112px; left: calc(12px + var(--sal)); } }

/* exhibit placard: left plate / right text (top plate / bottom text on
 * narrow screens), amber hairlines, terminal mono. In tour mode it docks
 * as a non-modal bottom sheet so the canvas keeps taking input. */
#exhibit { position: fixed; inset: 0; z-index: 34; display: flex; align-items: center; justify-content: center; background: rgba(4, 7, 11, 0.66); }
#exhibit[hidden] { display: none; }
#exhibit.tour { background: transparent; pointer-events: none; align-items: flex-end; padding-bottom: 52px; }
#exhibit-box { position: relative; display: flex; width: min(840px, 94vw); max-height: 76vh; border: 1px solid var(--line); background: rgba(6, 10, 16, 0.94); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6); }
#exhibit.tour #exhibit-box { pointer-events: auto; max-height: 46vh; }
#exhibit-box::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 197, 61, 0.65); }
#exhibit-media { position: relative; flex: 0 0 42%; min-height: 220px; border-right: 1px solid var(--line); background: #000; cursor: pointer; }
#exhibit.noimg #exhibit-media { display: none; }
#exhibit-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
#exhibit-plate { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 8px; padding: 14px 8px 5px; font-size: 8px; letter-spacing: 0.15em; color: var(--amber); background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); }
#exhibit-plate .plate-hint { color: var(--dim); }
#exhibit-text { flex: 1; min-width: 0; padding: 15px 18px 13px; overflow-y: auto; }
#exhibit-kicker { color: var(--amber); font-size: 8px; letter-spacing: 0.22em; }
#exhibit-title { margin-top: 6px; color: var(--cyan); font-size: 16px; letter-spacing: 0.1em; }
#exhibit-sub { margin-top: 4px; color: var(--ink); font-size: 10px; letter-spacing: 0.06em; font-style: italic; }
#exhibit-body { margin-top: 10px; }
#exhibit-body p { color: var(--ink); font-size: 9.5px; line-height: 1.85; letter-spacing: 0.04em; margin-bottom: 8px; }
#exhibit-facts { margin-top: 4px; width: 100%; border-collapse: collapse; }
#exhibit-facts td { border-top: 1px solid rgba(255, 197, 61, 0.22); padding: 4px 0; font-size: 8.5px; letter-spacing: 0.08em; vertical-align: top; }
#exhibit-facts td:first-child { color: var(--dim); text-transform: uppercase; width: 42%; padding-right: 8px; }
#exhibit-facts td:last-child { color: var(--ink); }
#exhibit-credit { margin-top: 10px; color: var(--dim); font-size: 7.5px; line-height: 1.7; letter-spacing: 0.08em; }
#exhibit-x, #tours-x, .menu-x { position: absolute; top: 4px; right: 6px; border: none; background: none; color: var(--dim); font-family: var(--mono); font-size: 13px; cursor: pointer; padding: 6px 8px; z-index: 2; }
#exhibit-x:hover, #tours-x:hover, .menu-x:hover { color: var(--amber); }

@media (max-width: 640px) {
  #exhibit-box { flex-direction: column; width: min(440px, 94vw); max-height: 82vh; }
  #exhibit-media { flex: 0 0 auto; height: 30vh; min-height: 140px; border-right: none; border-bottom: 1px solid var(--line); }
  #exhibit.tour { padding-bottom: 128px; }
  #exhibit.tour #exhibit-box { max-height: 58vh; }
  #exhibit-title { font-size: 13px; }
  #exhibit-body p { font-size: 9px; }
}


/* ---------------- DOM place-name labels (js/labels.js) ----------------
 * One zero-size .lb per name, parked at the projected surface point by an
 * inline translate3d; children hang off the anchor: 2px pin dot on the
 * point, hairline leader above it, tracked-out uppercase name on top.
 * Tier alpha arrives via inline opacity (0.85/0.70/0.55 by diameter,
 * 0.95 amber for sites); .on = survived de-overlap → clickable, .sel =
 * picked. */
#labels { position: fixed; inset: 0; z-index: 15; overflow: hidden; pointer-events: none; font-family: var(--mono); user-select: none; -webkit-user-select: none; }
#labels .lb { position: absolute; left: 0; top: 0; width: 0; height: 0; }
#labels .lb-txt {
  position: absolute; left: 0; bottom: 12px; transform: translateX(-50%);
  white-space: nowrap; font-size: 9px; letter-spacing: 0.14em; color: #e2ecf4;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(0, 0, 0, 0.6);
}
#labels .t1 .lb-txt { font-size: 10px; }
#labels .t0 .lb-txt { font-size: 12px; letter-spacing: 0.18em; }
#labels .sea .lb-txt { border-bottom: 1px solid rgba(226, 236, 244, 0.35); padding-bottom: 1px; }
#labels .site .lb-txt { color: var(--amber); }
#labels .lb-lead { position: absolute; left: -0.5px; top: -11px; width: 1px; height: 9px; background: rgba(127, 224, 255, 0.55); }
#labels .lb-dot { position: absolute; left: -1px; top: -1px; width: 2px; height: 2px; border-radius: 50%; background: rgba(127, 224, 255, 0.9); }
#labels .site .lb-lead { background: rgba(255, 197, 61, 0.6); }
#labels .site .lb-dot { background: rgba(255, 197, 61, 0.95); box-shadow: 0 0 6px rgba(255, 197, 61, 0.6); }
#labels .lb.on .lb-txt, #labels .lb.on .lb-dot { pointer-events: auto; cursor: pointer; }
#labels .lb.sel .lb-txt { color: var(--amber); }
#labels .lb.sel .lb-lead { background: rgba(255, 197, 61, 0.7); }
#labels .lb.sel .lb-dot { background: var(--amber); box-shadow: 0 0 8px rgba(255, 197, 61, 0.8); }

/* fly-to menu: tabbed SITES / MYTHS picker (js/menu.js) */
#menu { position: fixed; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center; background: rgba(4, 7, 11, 0.72); }
#menu[hidden] { display: none; }
.menu-box { position: relative; width: min(560px, 92vw); max-height: 82vh; overflow-y: auto; border: 1px solid var(--line); background: rgba(6, 10, 16, 0.92); padding: 18px; }
.menu-tabs { display: flex; justify-content: center; gap: 26px; margin-bottom: 14px; }
.menu-tab { border: none; border-bottom: 2px solid transparent; background: none; padding: 2px 2px 7px; color: var(--dim); font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menu-tab:hover { color: var(--ink); }
.menu-tab.on { color: var(--cyan); border-bottom-color: var(--amber); }
.menu-card { display: block; width: 100%; text-align: left; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--line); background: rgba(127, 224, 255, 0.04); color: var(--ink); font-family: var(--mono); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menu-card:hover { background: rgba(127, 224, 255, 0.12); }
.menu-card b { color: var(--cyan); font-size: 12px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.menu-card.locked b { color: var(--dim); }
.menu-card .tag { float: right; color: var(--amber); font-size: 8px; letter-spacing: 0.15em; }
.menu-card .sub { margin-top: 5px; color: var(--dim); font-size: 9px; letter-spacing: 0.08em; line-height: 1.7; text-transform: uppercase; }
.menu-card .hint { margin-top: 5px; color: var(--dim); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; }
@media (max-width: 480px) {
  .menu-box { padding: 14px; }
}

/* ---------------- sun angle control (js/sunctl.js) ----------------
 * Bottom-right mini panel: azimuth dial + elevation slider, parked above
 * the #hint line on fine pointers and above the JUMP/DOWN stack on coarse
 * ones. The host page owns #sunctl (position only); .sun-* is the module's.
 * --sun-az is set inline per frame, --sun-r sizes the dot orbit. */
#sunctl { position: fixed; right: calc(16px + var(--sar)); bottom: calc(40px + var(--sab)); z-index: 22; transition: opacity 0.3s; }
#sunctl:empty { display: none; }         /* main.js hasn't mounted the control */
body.hud-hidden #sunctl { opacity: 0; pointer-events: none; }
.sun-box { --sun-r: 24px; padding: 8px 10px 9px; border: 1px solid var(--line); background: rgba(6, 10, 16, 0.82); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.sun-head { display: flex; justify-content: space-between; gap: 12px; font-size: 8px; letter-spacing: 0.18em; color: var(--dim); }
.sun-ro { color: var(--amber); }
.sun-body { display: flex; align-items: center; gap: 12px; margin-top: 7px; }
.sun-dial { position: relative; width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 50%; background: rgba(10, 16, 24, 0.55); touch-action: none; cursor: pointer; }
.sun-card { position: absolute; font-style: normal; font-size: 6px; color: var(--dim); pointer-events: none; }
.sun-card.n { left: 50%; top: 1px; transform: translateX(-50%); }
.sun-card.e { right: 2px; top: 50%; transform: translateY(-50%); }
.sun-card.s { left: 50%; bottom: 1px; transform: translateX(-50%); }
.sun-card.w { left: 2px; top: 50%; transform: translateY(-50%); }
.sun-arm { position: absolute; left: 50%; bottom: 50%; width: 1px; height: var(--sun-r); margin-left: -0.5px; background: rgba(255, 197, 61, 0.4); transform-origin: 50% 100%; transform: rotate(var(--sun-az, 322deg)); pointer-events: none; }
.sun-dot { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px rgba(255, 197, 61, 0.8); transform: translate(-50%, -50%) rotate(var(--sun-az, 322deg)) translateY(calc(-1 * var(--sun-r))); pointer-events: none; }
.sun-el { position: relative; width: 14px; height: 64px; touch-action: none; cursor: pointer; }
.sun-el-rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(127, 224, 255, 0.25); pointer-events: none; }
.sun-el-rail::before, .sun-el-rail::after { content: ''; position: absolute; left: -3px; width: 8px; height: 1px; background: rgba(127, 224, 255, 0.4); }
.sun-el-rail::before { top: 0; }
.sun-el-rail::after { bottom: 0; }
.sun-el-thumb { position: absolute; left: 50%; width: 10px; height: 10px; transform: translate(-50%, 50%) rotate(45deg); background: var(--amber); box-shadow: 0 0 8px rgba(255, 197, 61, 0.7); pointer-events: none; }
@media (pointer: coarse) {
  #sunctl { right: calc(12px + var(--sar)); bottom: calc(212px + var(--sab)); }
}
body.force-touch #sunctl { bottom: calc(212px + var(--sab)); }
@media (max-width: 480px) {
  #sunctl { right: calc(10px + var(--sar)); }
  .sun-box { --sun-r: 20px; padding: 7px 8px 8px; }
  .sun-dial { width: 56px; height: 56px; }
  .sun-el { height: 56px; }
}

/* ---------------- comfortable touch targets (coarse pointers) ----------------
 * bring the smallest hit areas up toward the 44px guideline on the touch-first
 * platform: close ✕s, tour-bar controls, the exhibit CTA and the sun slider */
@media (pointer: coarse) {
  #exhibit-x, #tours-x, .menu-x {
    min-width: 44px; min-height: 44px; padding: 11px 12px;
    display: flex; align-items: center; justify-content: center;
  }
  #tour-bar button { padding: 10px 12px; }
  #tour-pause, #tour-speed, #tour-exit { min-width: 40px; min-height: 40px; }
  #exhibit-cta button { padding: 11px 14px; }
  #exhibit-cta #exhibit-cta-x { min-width: 40px; }
  .sun-el { width: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  /* honour a motion-sensitivity preference: kill the looping boot/guide
   * animations and shorten transitions (the 3D scene itself stays) */
  #boot-fill:not([style]) { animation: none; }
  #guide-tap { animation: none; }
  * { transition-duration: 0.01ms !important; }
}