/* Hall HUD (hall-ui.js): one calm system on every device - square edges (max 4px), orange used sparingly.
   Guidance: at most ONE element at a time. html[data-guide] = 'hint' (first-time hint) or 'coach' (help) owns the
   screen; otherwise the aim hint wins over the key line. html[data-coached] = learnt (per browser): the first-time
   hints stay away, only "?" recalls the help.
   Layout: the quiet position arrow on top (the "n / 7" lives in the header, site.css), walking bar at the bottom
   ("?" · primary · "Mehr"); desktop shows the action sheet inline and the fast-travel row. Safe-area insets (notch,
   home bar) on every edge. */
:root {
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
  --hud-target: 48px; --hud-top: var(--header);
  --hud-bg: rgba(14,16,20,0.86);
}
.hud[hidden] { display: none; }
.hud { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
.hud button { pointer-events: auto; }

/* ---- quiet arrow toward the next section (hud-position.js): direction only, no text, no metres. The header's
   "n / 7" (.hud-pos, site.css) is the other half of the position indicator. ---- */
.hud-arrow { position: absolute; top: calc(var(--hud-top) + 14px + var(--safe-t)); left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px; display: grid; place-items: center; color: var(--accent); font-size: 1rem; line-height: 1;
  opacity: 0; transition: opacity 0.4s ease, transform 0.2s ease; }
.hud-arrow.on { opacity: 0.6; }

/* ---- fast travel (desktop; phones: keys 0-9 and the zone list on the page) ---- */
.dests { position: absolute; top: calc(var(--hud-top) + 10px + var(--safe-t)); left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); }
.dests ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.dests button { min-height: var(--hud-target); padding: 0 10px; border: 1px solid var(--border); border-radius: 2px; background: rgba(14,16,20,0.72); color: var(--text-2);
  font: 600 0.72rem/1 var(--font); cursor: pointer; }
.dests button kbd { font: 700 0.68rem/1 var(--mono); color: var(--accent); margin-right: 6px; }
.dests button:hover, .dests button:focus-visible, .dests button[aria-current] { color: var(--text); border-color: var(--accent); }

/* ---- crosshair and aim hint ---- */
.crosshair { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(232,234,240,0.7); box-shadow: 0 0 0 2px rgba(14,16,20,0.4); }
.aim { position: absolute; left: 50%; top: calc(50% + 22px); transform: translateX(-50%); margin: 0; padding: 6px 12px; border-radius: 2px; background: var(--hud-bg);
  border: 1px solid var(--border); font: 600 0.82rem/1.2 var(--font); color: var(--text); opacity: 0; transition: opacity 0.2s ease; white-space: nowrap; }
.aim.on { opacity: 1; }
.aim kbd { font: 700 0.75rem/1 var(--mono); color: #0E1014; background: var(--accent); padding: 2px 6px; border-radius: 2px; margin-right: 8px; }

/* ---- help coach ("?") ---- */
.hud-coach { position: absolute; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); width: min(420px, calc(100% - 32px));
  padding: 16px 18px; background: rgba(20,22,27,0.94); border: 1px solid var(--border); border-top: 2px solid var(--accent); border-radius: 2px; pointer-events: none; }   /* touches pass through to the thumb zones; its button still takes taps (.hud button) */
.hud-coach[hidden] { display: none; }
.hud-coach-title { margin: 0 0 8px; font: 600 0.72rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.hud-coach-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; color: var(--text-2); font-size: 0.9rem; }
.hud-coach-list strong { display: block; color: var(--text); font-size: 0.92rem; }
.coarse .hud-coach-list[data-for="keys"], html:not(.coarse) .hud-coach-list[data-for="touch"] { display: none; }
.hud-coach-ok { min-height: var(--hud-target); }

/* ---- walking bar: "?" · (key line) · primary · "Mehr" + action sheet ---- */
.walk-bar { position: absolute; left: 50%; bottom: calc(16px + var(--safe-b)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  padding: 6px; background: var(--hud-bg); border: 1px solid var(--border); border-radius: 2px; max-width: calc(100% - 32px - var(--safe-l) - var(--safe-r)); }
.walk-keys { margin: 0 6px; color: var(--text-2); font-size: 0.82rem; line-height: 1.35; transition: opacity 0.5s ease; }
.hud-icon { min-width: var(--hud-target); min-height: var(--hud-target); padding: 0 12px; }
#btn-help { font: 700 1.05rem/1 var(--mono); padding: 0; }
#btn-read { min-height: var(--hud-target); }
#btn-more { display: none; }
.hud-sheet { display: flex; gap: 8px; }
.world-bar { display: flex; gap: 8px; }
.world-bar[hidden], .world-bar [hidden] { display: none; }
.world-bar .btn { min-height: var(--hud-target); }
.world-bar kbd { margin-left: 6px; font: inherit; opacity: 0.75; }
.walk-bar :focus-visible, .hud-coach :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.exploring .dests, .exploring .walk-bar, .exploring .hud-arrow { display: none; }

/* ---- quiet footer dots (hud-position.js, phones): one of the seven page sections, tap jumps there. Small visible
   dot, full 44 px touch target; more than fit the bar scroll sideways rather than shrink below that target. ---- */
.hud-dots { display: none; }
.hud-dots button { flex: none; width: 44px; height: 44px; padding: 0; margin: 0; border: none; background: transparent; cursor: pointer; display: grid; place-items: center; }
.hud-dots button::before { content: ''; width: 6px; height: 6px; background: var(--border-strong); transition: background 0.15s ease, transform 0.15s ease; }
.hud-dots button[aria-current]::before { background: var(--accent); transform: scale(1.3); }
.hud-dots button:focus-visible { outline: 3px solid var(--focus); outline-offset: -2px; }

/* ---- one guidance element at a time ---- */
html[data-coached] .walk-keys, html[data-guide] .walk-keys, .aim.on ~ .walk-bar .walk-keys { display: none; }
html[data-guide] .aim { display: none; }
/* the content layer's DOM guides (guide marker, companion cards) give way to the HUD's own guidance */
html[data-guide="coach"] [data-bo-guide], html[data-guide="sheet"] [data-bo-guide], html[data-guide="hint"] [data-bo-guide], [data-bo-guide-off] { display: none !important; }
html[data-coached] .hint-line { display: none; }   /* learnt (localStorage): the quiet start hint never shows again, any visit */
html[data-coached] .explore-bar .keys { display: none; }
.scene-ready .scroll-cue { display: none; }   /* the key hint already says "Scrollen: lesen" */

/* ---- phones and touch: collapsed bar, action sheet, no fast-travel row ---- */
@media (max-width: 760px), (pointer: coarse) {
  .dests, .walk-keys { display: none; }
  html[data-guide="hint"] .hud-arrow, html[data-guide="ext"] .hud-arrow { opacity: 0; visibility: hidden; }   /* phones: arrow only without a guide */
  #btn-more { display: inline-flex; }
  #btn-read { display: none; }   /* moved into the header while walking (site.js); the dots take its place here */
  .hud-dots { display: flex; align-items: center; gap: 2px; overflow-x: auto; max-width: 35vw; scrollbar-width: none; }
  .hud-dots::-webkit-scrollbar { display: none; }
  .hud-sheet { display: none; position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 240px; max-width: calc(100vw - 32px); padding: 8px;
    flex-direction: column; background: rgba(20,22,27,0.96); border: 1px solid var(--border); border-top: 2px solid var(--accent); border-radius: 2px; }
  .walk-bar.sheet-open .hud-sheet { display: flex; }
  .hud-sheet .world-bar { flex-direction: column; }
  .hud-sheet .btn { width: 100%; justify-content: flex-start; }
  .world-bar kbd { display: none; }
  .walking .site-header .btn[data-explore] { display: none; }   /* one primary per mode: "Zur Seite" while walking */
}
/* phones in landscape: the header steps aside while walking, the strip moves up */
@media (max-height: 500px) and (pointer: coarse) {
  .walking .site-header { visibility: hidden; }
  /* "Zur Seite" moved here (site.js) and the position indicator stay reachable even though the rest of the
     header steps aside - visibility set back to visible overrides the hidden header it inherits from */
  .walking .site-header #btn-read, .walking .site-header #hud-pos { visibility: visible; }
  .walking { --hud-top: 0px; }
  .walk-bar { bottom: calc(10px + var(--safe-b)); }
  .hud-coach { bottom: calc(80px + var(--safe-b)); }
}
.reduce-motion .hud-arrow, .reduce-motion .aim, .reduce-motion .walk-keys { transition: none; }