/* HUD cleanup lane: mystery (2026-10-31). Builds on styles/72-hud-taste.css tokens.
   Castle Mystery Trail: one pill row (Journal, Next step), a bare 1-2-3 bead meter, a room pill,
   and one bottom dialogue box family (narration, compass, clue, interview, reveal) with a gold
   name plaque and the helper portrait. Case title, subtitle, trail copy and room brief are kept in
   the DOM for screen readers and the journal but no longer float over the 3D rooms. */

.mystery-trail.mystery-immersive .mystery-sr-hide,
.mystery-trail.mystery-immersive .mystery-3d-hud > strong,
.mystery-trail.mystery-immersive .mystery-3d-hud > span,
.mystery-trail.mystery-immersive .mystery-case-notes > strong,
.mystery-trail.mystery-immersive .mystery-case-note-copy,
.mystery-trail.mystery-immersive .mystery-clue-kicker,
.mystery-trail.mystery-immersive .mystery-interview-dialog-copy > p,
.mystery-trail.mystery-immersive .mystery-reveal-kicker {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Pill row: Journal + Next step, beside the shell's Back button. */
.mystery-trail.mystery-immersive .mystery-3d-hud {
  top: 12px;
  left: 108px;
  right: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: auto;
  min-width: 0;
  max-width: calc(100% - 420px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mystery-trail.mystery-immersive :is(.mystery-journal-open, .mystery-compass-open) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  min-width: 48px;
  min-height: var(--hud-tap);
  margin: 0;
  padding: 0 18px 0 14px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl);
  color: var(--hud-ink);
  box-shadow: var(--hud-shadow-soft);
  backdrop-filter: var(--hud-blur);
  -webkit-backdrop-filter: var(--hud-blur);
  font: var(--hud-text);
  letter-spacing: 0;
  text-transform: none;
}
.mystery-trail.mystery-immersive :is(.mystery-journal-open, .mystery-compass-open) i {
  font-style: normal;
  font-size: 19px;
  line-height: 1;
}
.mystery-trail.mystery-immersive :is(.mystery-journal-open, .mystery-compass-open):active {
  background: var(--hud-pearl-press);
}

/* Detective trail: no box, no label, no copy. Three bare beads, plus the two evidence beads
   only while a room is being proved. */
.mystery-trail.mystery-immersive .mystery-case-notes {
  top: 64px;
  right: var(--hud-edge);
  left: auto;
  display: grid;
  justify-items: end;
  gap: 6px;
  width: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}
.mystery-trail.mystery-immersive .mystery-reasoning-steps {
  display: flex;
  gap: 6px;
}
.mystery-trail.mystery-immersive .mystery-reasoning-steps > span {
  gap: 6px;
  padding: 4px 12px 4px 5px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl);
  color: var(--hud-ink-soft);
  box-shadow: none;
  font: var(--hud-text-small);
  letter-spacing: 0;
  text-transform: none;
}
.mystery-trail.mystery-immersive .mystery-reasoning-steps b {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
  background: rgba(91, 35, 70, 0.1);
  color: var(--hud-ink);
  font: 700 13px/1 var(--hud-font);
}
.mystery-trail.mystery-immersive .mystery-reasoning-steps > span.is-active {
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  box-shadow: var(--hud-shadow-soft);
}
.mystery-trail.mystery-immersive .mystery-reasoning-steps > span.is-active b {
  background: var(--hud-gold);
  color: #fff;
}
.mystery-trail.mystery-immersive .mystery-reasoning-steps > span.is-done {
  border-color: rgba(111, 211, 189, 0.7);
  color: var(--hud-ink);
}
.mystery-trail.mystery-immersive .mystery-reasoning-steps > span.is-done b {
  background: var(--hud-mint);
  color: #fff;
}
.mystery-trail.mystery-immersive .mystery-evidence-pair {
  display: flex;
  gap: 6px;
}
.mystery-trail.mystery-immersive .mystery-evidence-pair[hidden] {
  display: none;
}
.mystery-trail.mystery-immersive .mystery-evidence-pair > span {
  max-width: 150px;
  padding: 5px 12px;
  border: 1px dashed var(--hud-gold-line);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl);
  color: var(--hud-ink-soft);
  font: var(--hud-text-small);
}
.mystery-trail.mystery-immersive .mystery-evidence-pair > span.is-found {
  border: 1px solid rgba(111, 211, 189, 0.8);
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
}

/* Room: one small pill. The brief's room name repeats it and its "inspect the..." note is what the
   glowing evidence sparkles in the 3D room already show. */
.mystery-trail.mystery-immersive .mystery-room-name {
  top: 14px;
  padding: 0 18px;
  min-height: 38px;
  display: grid;
  place-items: center;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl);
  color: var(--hud-ink);
  box-shadow: var(--hud-shadow-soft);
  backdrop-filter: var(--hud-blur);
  -webkit-backdrop-filter: var(--hud-blur);
  font: var(--hud-text);
}
.mystery-trail.mystery-immersive .mystery-3d-world.in-room-scene .mystery-room-name {
  translate: -50% 0;
}
.mystery-trail.mystery-immersive .mystery-room-brief {
  display: none;
}

/* Walk pad: four pearl jewels, no tray behind them. */
.mystery-trail.mystery-immersive .mystery-3d-controls {
  grid-template-columns: repeat(3, 56px);
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mystery-trail.mystery-immersive .mystery-3d-controls button {
  width: 56px;
  min-width: 56px;
  height: 56px;
  min-height: 56px;
  border: var(--hud-hairline);
  border-radius: 50%;
  background: var(--hud-pearl);
  color: var(--hud-ink);
  box-shadow: var(--hud-shadow-soft);
  backdrop-filter: var(--hud-blur);
  -webkit-backdrop-filter: var(--hud-blur);
  font: 700 26px/1 var(--hud-font);
}
.mystery-trail.mystery-immersive .mystery-3d-controls button:active {
  background: var(--hud-pearl-press);
}

/* Dialogue box family: narration (speech) and the next-step compass, framed at the bottom. */
.mystery-trail.mystery-immersive :is(.mystery-3d-speech, .mystery-case-compass) {
  position: absolute;
  z-index: 5;
  top: auto;
  bottom: 22px;
  left: max(16px, calc(50% - 300px));
  right: max(240px, calc(50% - 300px));
  width: auto;
  min-height: 0;
  margin: 0;
  box-sizing: border-box;
  padding: 24px 22px 16px;
  border: var(--hud-hairline);
  border-radius: var(--hud-radius);
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  box-shadow: var(--hud-shadow);
  backdrop-filter: var(--hud-blur);
  -webkit-backdrop-filter: var(--hud-blur);
  font: 600 17px/1.35 var(--hud-font);
}
.mystery-trail.mystery-immersive .mystery-3d-speech::before,
.mystery-trail.mystery-immersive .mystery-case-compass > strong,
.mystery-trail.mystery-immersive :is(.mystery-clue-speaker-name, .mystery-interview-dialog-copy h3, .mystery-reveal-copy-wrap h3) {
  position: absolute;
  top: -15px;
  left: 18px;
  max-width: calc(100% - 36px);
  margin: 0;
  padding: 5px 16px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--hud-pill);
  background: linear-gradient(180deg, #f7e0a6, var(--hud-gold));
  color: var(--hud-ink);
  box-shadow: var(--hud-shadow-soft);
  font: 700 14px/1.2 var(--hud-font);
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
.mystery-trail.mystery-immersive .mystery-3d-speech::before {
  content: attr(data-speaker);
}
.mystery-trail.mystery-immersive .mystery-3d-speech:not([data-speaker])::before {
  display: none;
}
.mystery-trail.mystery-immersive .mystery-3d-world.clue-modal-open .mystery-3d-speech,
.mystery-trail.mystery-immersive .mystery-3d-world:has(.mystery-case-compass:not([hidden])) .mystery-3d-speech {
  opacity: 0;
}
.mystery-trail.mystery-immersive .mystery-case-compass {
  z-index: 6;
  display: grid;
  gap: 12px;
}
.mystery-trail.mystery-immersive .mystery-case-compass[hidden] {
  display: none;
}
.mystery-trail.mystery-immersive .mystery-case-compass > span {
  color: var(--hud-ink);
  font: 600 17px/1.35 var(--hud-font);
}
.mystery-trail.mystery-immersive .mystery-compass-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

/* Continue controls (dialogues and compass) share one jewel pill. */
.mystery-trail.mystery-immersive :is(.mystery-compass-action, .mystery-compass-close, .mystery-clue-continue, .mystery-interview-continue, .mystery-reveal-continue) {
  justify-self: end;
  min-height: var(--hud-tap);
  margin: 0;
  padding: 0 22px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: linear-gradient(180deg, #fff8e6, #f7e0a6);
  color: var(--hud-ink);
  box-shadow: var(--hud-shadow-soft);
  font: 700 15px/1 var(--hud-font);
  letter-spacing: 0;
  text-transform: none;
}
.mystery-trail.mystery-immersive :is(.mystery-compass-action, .mystery-clue-continue, .mystery-interview-continue, .mystery-reveal-continue)::after {
  content: " \25B8";
}
.mystery-trail.mystery-immersive .mystery-compass-close {
  background: var(--hud-pearl);
}

/* Clue, interview and reveal: the same bottom dialogue box with the helper's portrait. */
.mystery-trail.mystery-immersive :is(.mystery-clue-modal, .mystery-interview-modal, .mystery-reveal-modal) {
  place-items: end center;
  padding: 0 16px 22px;
  background: linear-gradient(to top, rgba(91, 35, 70, 0.26), rgba(91, 35, 70, 0) 58%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.mystery-trail.mystery-immersive :is(.mystery-clue-modal, .mystery-interview-modal, .mystery-reveal-modal)[hidden] {
  display: none;
}
/* Interviews and the reveal open from journal cards: they must sit above the journal page (z 36). */
.mystery-trail.mystery-immersive .mystery-interview-modal {
  z-index: 40;
}
.mystery-trail.mystery-immersive .mystery-reveal-modal {
  z-index: 41;
}
.mystery-trail.mystery-immersive :is(.mystery-clue-dialog-card, .mystery-interview-dialog-card, .mystery-reveal-dialog-card) {
  position: relative;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: end;
  gap: 18px;
  width: min(740px, 100%);
  max-height: none;
  overflow: visible;
  padding: 26px 22px 16px;
  border: var(--hud-hairline);
  border-radius: var(--hud-radius);
  background: #fffaf7;
  color: var(--hud-ink);
  box-shadow: var(--hud-shadow);
}
.mystery-trail.mystery-immersive .mystery-clue-speaker {
  display: contents;
}
.mystery-trail.mystery-immersive :is(.mystery-clue-portrait, .mystery-interview-dialog-portrait, .mystery-reveal-portrait) {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  width: 150px;
  margin-top: -96px;
  margin-bottom: -6px;
  border-radius: 0;
}
/* The four suspect dialogue sheets are one row of 8 frames (3072x480); the old 4x8 sizing showed a sliver. */
.mystery-trail.mystery-immersive :is(.mystery-interview-dialog-portrait, .mystery-reveal-portrait)[data-sheet="strip8"] {
  aspect-ratio: 384 / 480;
  background-size: 800% 100%;
  background-position: 0 0;
}
.mystery-trail.mystery-immersive :is(.mystery-clue-speaker-name, .mystery-interview-dialog-copy h3, .mystery-reveal-copy-wrap h3) {
  left: 190px;
  max-width: calc(100% - 210px);
}
.mystery-trail.mystery-immersive :is(.mystery-clue-copy, .mystery-interview-dialog-copy, .mystery-reveal-copy-wrap) {
  grid-column: 2;
  grid-row: 1;
  gap: 8px;
  min-width: 0;
}
.mystery-trail.mystery-immersive .mystery-reveal-copy-wrap {
  max-height: min(52vh, 360px);
  overflow: auto;
}
.mystery-trail.mystery-immersive .mystery-clue-copy h3 {
  margin: 0;
  color: var(--hud-ink);
  font: 700 20px/1.2 var(--hud-font);
}
.mystery-trail.mystery-immersive :is(.mystery-clue-line, .mystery-interview-dialog-line, .mystery-reveal-story) {
  color: var(--hud-ink);
  font: 600 17px/1.35 var(--hud-font);
}
.mystery-trail.mystery-immersive .mystery-interview-dialog-clue {
  color: #2f7f70;
  font: italic 600 15px/1.3 var(--hud-font);
}
.mystery-trail.mystery-immersive .mystery-reveal-trail span {
  padding: 5px 12px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl);
  color: var(--hud-ink);
  font: var(--hud-text-small);
}

/* Journal stays a page; only its close button joins the pearl family at full tap size. */
.mystery-trail.mystery-immersive .mystery-journal-close {
  min-width: var(--hud-tap);
  min-height: var(--hud-tap);
  border: var(--hud-hairline);
  border-radius: 50%;
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
}

@media (max-width: 760px) {
  .mystery-trail.mystery-immersive .mystery-3d-hud {
    top: 66px;
    left: 10px;
    right: auto;
    max-width: calc(100% - 20px);
  }
  .mystery-trail.mystery-immersive :is(.mystery-journal-open, .mystery-compass-open) {
    padding: 0 14px 0 11px;
    font: var(--hud-text);
  }
  .mystery-trail.mystery-immersive .mystery-case-notes,
  .mystery-trail.mystery-immersive .mystery-room-name {
    display: none;
  }
  .mystery-trail.mystery-immersive .mystery-3d-controls {
    right: 8px;
    bottom: 58px;
    grid-template-columns: repeat(3, 48px);
    gap: 6px;
  }
  .mystery-trail.mystery-immersive .mystery-3d-controls button {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    font-size: 22px;
  }
  .mystery-trail.mystery-immersive :is(.mystery-3d-speech, .mystery-case-compass) {
    left: 10px;
    right: 172px;
    bottom: 58px;
    padding: 20px 12px 10px;
    font: 600 14px/1.3 var(--hud-font);
  }
  .mystery-trail.mystery-immersive .mystery-case-compass > span {
    font: 600 14px/1.3 var(--hud-font);
  }
  .mystery-trail.mystery-immersive .mystery-3d-world:has(.mystery-case-compass:not([hidden])) .mystery-case-compass {
    right: 10px;
    bottom: 176px;
  }
  .mystery-trail.mystery-immersive .mystery-3d-speech::before,
  .mystery-trail.mystery-immersive .mystery-case-compass > strong {
    left: 10px;
    font-size: 13px;
    padding: 4px 12px;
  }
  .mystery-trail.mystery-immersive :is(.mystery-clue-modal, .mystery-interview-modal, .mystery-reveal-modal) {
    padding: 0 10px 14px;
  }
  .mystery-trail.mystery-immersive :is(.mystery-clue-dialog-card, .mystery-interview-dialog-card, .mystery-reveal-dialog-card) {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    padding: 24px 14px 12px;
  }
  .mystery-trail.mystery-immersive :is(.mystery-clue-portrait, .mystery-interview-dialog-portrait, .mystery-reveal-portrait) {
    align-self: start;
    width: 92px;
    margin-top: -58px;
    margin-bottom: 0;
  }
  .mystery-trail.mystery-immersive :is(.mystery-clue-speaker-name, .mystery-interview-dialog-copy h3, .mystery-reveal-copy-wrap h3) {
    left: 118px;
    max-width: calc(100% - 128px);
    font-size: 13px;
  }
  .mystery-trail.mystery-immersive .mystery-clue-copy h3 {
    font-size: 17px;
  }
  .mystery-trail.mystery-immersive :is(.mystery-clue-line, .mystery-interview-dialog-line, .mystery-reveal-story) {
    font-size: 15px;
  }
  .mystery-trail.mystery-immersive .mystery-interview-dialog-clue {
    font-size: 14px;
  }
}

/* The compass now lives outside the case box: hide it with the rest of the HUD on the finish screen. */
.mystery-trail.mystery-immersive:has(.mini-world-complete) .mystery-case-compass {
  display: none;
}