/* HUD cleanup lane: worlds-a (2026-10-31). Builds on styles/72-hud-taste.css tokens.
   One quiet HUD family for the four walk-around worlds (Princess Explorer, Lantern Promise,
   Cloudblossom Orchard, Starweave Observatory), standalone and inside the castle.
   Layout: Castle pill top-left, journal/map (+ Pause) top-right, pad bottom-left, Hop bottom-right,
   one pearl footer bottom-centre = Listen + the hint line + the one action button.
   Titles are screen-reader only; the area name and the keyboard tip show for a moment, then fold.
   No backdrop-filter: these sit over a live WebGL canvas, and blur re-renders every frame on iPads. */

/* ---- shared pieces ---- */
.wa-world .wa-sr { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
.wa-world canvas:focus, .wa-world canvas:focus-visible { outline: none; }
.wa-world .wa-ico { width: 22px; height: 22px; flex: none; fill: currentColor; }
.wa-world .wa-ico-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wa-world button {
  font: 700 15px/1.2 var(--hud-font); color: var(--hud-ink);
  min-width: var(--hud-tap); min-height: var(--hud-tap);
  background: var(--hud-pearl); border: var(--hud-hairline); border-radius: var(--hud-pill);
  box-shadow: var(--hud-shadow-soft);
}
.wa-world button:hover { background: var(--hud-pearl-strong); }
.wa-world button:active { background: var(--hud-pearl-press); }
.wa-world button:focus-visible { outline: 3px solid var(--hud-rose); outline-offset: 2px; }

/* ---- header: Castle | (area plaque) | journal | pause ---- */
.wa-world .wa-header {
  top: max(var(--hud-edge), env(safe-area-inset-top)); left: max(var(--hud-edge), env(safe-area-inset-left)); right: max(var(--hud-edge), env(safe-area-inset-right));
  display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; pointer-events: none;
}
.wa-world .wa-header > * { pointer-events: auto; }
.wa-world .wa-header button { display: inline-flex; align-items: center; gap: 7px; padding: 0 17px 0 13px; }
.wa-world .wa-header .wa-pause { position: static; }
.wa-world .wa-header .wa-journal-btn { margin-left: auto; }
.wa-world .wa-titlebox { flex: 1; min-width: 0; margin: 0; padding: 0; text-align: center; background: none; border: 0; border-radius: 0; box-shadow: none; pointer-events: none; }
.wa-world .wa-area {
  display: inline-block; max-width: 100%; margin: 0; padding: 9px 18px; box-sizing: border-box;
  font: 700 15px/1.2 var(--hud-font); letter-spacing: 0; text-transform: none; color: var(--hud-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--hud-pearl); border: var(--hud-hairline); border-radius: var(--hud-pill); box-shadow: var(--hud-shadow-soft);
  opacity: 0; visibility: hidden;
}
/* the JS adds .wa-flash when the world finishes loading and whenever the area changes */
.wa-world .wa-area.wa-flash { animation: wa-area-again 3.4s ease both; }
@keyframes wa-area-again { 0% { opacity: 0; visibility: visible; transform: translateY(-6px); } 12%, 80% { opacity: 1; visibility: visible; transform: none; } 100% { opacity: 0; visibility: hidden; } }

/* ---- footer: [Listen] hint / action ---- */
.wa-world .wa-footer {
  position: absolute; top: auto; left: 50%; right: auto; bottom: max(var(--hud-edge), env(safe-area-inset-bottom));
  transform: translateX(-50%); width: min(460px, calc(100% - 440px)); box-sizing: border-box;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "hint hint" "listen action" "save save";
  align-items: center; gap: 8px 12px; padding: 10px 12px 12px; text-align: left; color: var(--hud-ink);
  background: var(--hud-pearl-strong); border: var(--hud-hairline); border-radius: var(--hud-radius); box-shadow: var(--hud-shadow);
}
.wa-world .wa-footer .wa-hint, #explorer-hint.wa-hint, #lantern-hint.wa-hint, #orchard-hint.wa-hint, #starweave-hint.wa-hint {
  grid-area: hint; margin: 0; min-height: 0; font: 500 16px/1.35 var(--hud-story-font); color: var(--hud-ink); text-align: left;
}
.wa-world .wa-footer .wa-listen { grid-area: listen; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0 15px 0 11px; }
.wa-world .wa-footer .wa-action {
  grid-area: action; width: 100%; max-width: none; min-height: 48px; margin: 0; padding: 8px 18px;
  font: 800 17px/1.2 var(--hud-font); color: var(--hud-ink); border: var(--hud-hairline); border-radius: var(--hud-pill); box-shadow: var(--hud-shadow-soft);
}
.wa-world .wa-footer .wa-action:disabled { opacity: 0.72; }
.explorer-modal.wa-world .wa-footer .wa-action, .starweave-modal.wa-world .wa-footer .wa-action { background: linear-gradient(180deg, #fde8f1, #f6cfe0); }
.lantern-modal.wa-world .wa-footer .wa-action { background: linear-gradient(90deg, #efcf8c var(--lantern-progress, 0%), #fff6e4 var(--lantern-progress, 0%)); }
.orchard-modal.wa-world .wa-footer .wa-action { background: linear-gradient(180deg, #f2f8e8, #dcedcc); }
/* no action right now: Listen sits beside the hint so the footer stays one row */
.wa-world .wa-footer:has(> .wa-action[hidden]) { grid-template-areas: "listen hint" "save save"; }
.wa-world .wa-footer .wa-save { grid-area: save; margin: 0; font: var(--hud-text-small); color: var(--hud-ink-soft); text-align: center; }
.wa-world .wa-footer .wa-save:empty { display: none; }
/* keyboard tip: a small pearl caption above the footer for the first moment, then it folds away */
.wa-world .wa-footer .wa-tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; white-space: nowrap; box-sizing: border-box;
  margin: 0 !important; padding: 6px 14px; font: var(--hud-text-small); color: var(--hud-ink); text-align: center;
  background: var(--hud-pearl); border-radius: var(--hud-pill); box-shadow: var(--hud-shadow-soft); pointer-events: none;
  animation: wa-tip-fold 9s ease both;
}
@keyframes wa-tip-fold { 0%, 88% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* ---- movement: pad, hop, look ---- */
.wa-world .wa-pad {
  position: absolute; left: max(24px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px); gap: 6px;
}
.wa-world .wa-pad button { width: 52px; height: 52px; min-width: 52px; padding: 0; border-radius: 18px; font: 700 22px/1 var(--hud-font); touch-action: none; }
.wa-world .wa-pad span { width: 10px; height: 10px; background: var(--hud-gold-line); }
.wa-world .wa-hop {
  position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(28px, env(safe-area-inset-bottom));
  width: 84px; height: 84px; min-width: 84px; padding: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 800 18px/1.1 var(--hud-font); background: var(--hud-pearl-strong); border: var(--hud-hairline); box-shadow: var(--hud-shadow);
}
.wa-world .wa-hop span { display: block; margin-top: 3px; font: 600 13px/1.1 var(--hud-font); color: var(--hud-ink-soft); opacity: 1; }
.wa-world .wa-look button { width: 52px; height: 52px; padding: 0; border-radius: 50%; font: 700 26px/1 var(--hud-font); }

/* ---- journal drawers (Explorer map & journal, Lantern discoveries): same place, same look ---- */
.wa-world .wa-drawer {
  position: absolute; top: calc(max(var(--hud-edge), env(safe-area-inset-top)) + 62px); right: max(var(--hud-edge), env(safe-area-inset-right)); left: auto; bottom: auto;
  width: min(380px, calc(100% - 28px)); max-width: none; max-height: calc(100% - 100px); overflow-y: auto; box-sizing: border-box; z-index: 5;
  padding: 18px; color: var(--hud-ink); background: var(--hud-pearl-strong); border: var(--hud-hairline); border-radius: var(--hud-radius); box-shadow: var(--hud-shadow);
}
.wa-world .wa-drawer h3 { margin: 14px 0 12px; font: 500 23px/1.2 var(--hud-story-font); color: var(--hud-ink); }
.wa-world .wa-drawer > h3:first-child { margin-top: 0; }
.wa-world .wa-drawer h4 { margin: 16px 0 6px; font: 700 15px/1.3 var(--hud-font); color: var(--hud-ink); }
.wa-world .wa-drawer p, .wa-world .wa-drawer li { font: 500 15px/1.45 var(--hud-font); color: var(--hud-ink); }
.wa-world .wa-drawer button { border-radius: var(--hud-pill); }
.wa-world .explorer-quest-list [aria-pressed=true] { background: var(--hud-rose-soft); color: var(--hud-ink); border-color: var(--hud-rose); box-shadow: inset 0 0 0 2px var(--hud-rose); }
.wa-world .explorer-journal details summary { min-height: var(--hud-tap); display: flex; align-items: center; font: 700 15px/1.3 var(--hud-font); cursor: pointer; }
.wa-world .lantern-clue-book { background: var(--hud-rose-soft); border-radius: 16px; }

/* ---- ending cards: same pearl, no tiny small-caps ---- */
.wa-world :is(.lantern-ending, .orchard-ending, .starweave-ending) { color: var(--hud-ink); background: var(--hud-pearl-strong); border: var(--hud-hairline); border-radius: var(--hud-radius); box-shadow: var(--hud-shadow); }
.wa-world :is(.lantern-kicker, .orchard-ending-kicker, .starweave-kicker) { font: 700 13px/1.3 var(--hud-font); letter-spacing: 0.06em; color: var(--hud-ink-soft); }

/* keep each world's own "hide the HUD while the ending card shows" rule (the display rules above would otherwise win) */
.wa-world:is(.lantern-celebrating, .orchard-celebrating, .starweave-celebrating) :is(.wa-footer, .wa-pad), .wa-world.lantern-celebrating .wa-hop { display: none; }

@media (pointer: coarse) { .wa-world .wa-hop span { display: none; } }

/* ---- phones ---- */
@media (max-width: 700px) {
  .wa-world .wa-header { top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; gap: 8px; }
  .wa-world .wa-header button { padding: 0 14px 0 11px; font-size: 14px; }
  .wa-world .wa-titlebox { position: absolute; top: 58px; left: 0; right: 0; flex: none; }
  .wa-world .wa-footer { left: 10px; right: 10px; width: auto; transform: none; bottom: max(10px, env(safe-area-inset-bottom)); padding: 10px 12px 12px; gap: 8px 10px; }
  .wa-world .wa-footer .wa-listen { flex-direction: column; justify-content: center; gap: 1px; min-width: 58px; padding: 3px 8px; border-radius: 18px; font: 700 13px/1.1 var(--hud-font); }
  .wa-world .wa-footer .wa-listen .wa-ico { width: 20px; height: 20px; }
  .wa-world .wa-footer .wa-hint, #explorer-hint.wa-hint, #lantern-hint.wa-hint, #orchard-hint.wa-hint, #starweave-hint.wa-hint { font-size: 15px; }
  .wa-world .wa-footer .wa-action { font-size: 16px; }
  .wa-world .wa-footer .wa-tip { display: none; }
  .wa-world .wa-pad { left: 12px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 136px); }
  .wa-world .wa-hop { right: 12px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 140px); width: 72px; height: 72px; min-width: 72px; min-height: 72px !important; }
  .wa-world .wa-look { right: 12px; top: 30%; }
  .wa-world .wa-drawer { top: calc(max(10px, env(safe-area-inset-top)) + 58px); right: 10px; width: calc(100% - 20px); max-height: calc(100% - 80px); }
}

/* ---- short landscape (phones on their side) ---- */
@media (max-height: 500px) and (min-width: 701px) {
  .wa-world .wa-header { top: 8px; }
  .wa-world .wa-footer { bottom: 8px; width: min(460px, calc(100% - 420px)); padding: 8px 12px 10px; gap: 6px 10px; }
  .wa-world .wa-footer .wa-tip { display: none; }
  .wa-world .wa-pad { bottom: 8px; }
  .wa-world .wa-hop { bottom: 10px; }
}