/* The HQ overlay: name tags, speech bubbles, the brand block, the step bar and the live log (hq_scene.mjs, hq_hud.mjs). Shared by index.html and home.html. */
  .tags { position: absolute; inset: 0; pointer-events: none; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
  .tag { position: absolute; left: 0; top: 0; padding: .35em .7em .4em; background: rgba(6, 6, 8, .88); border: 1px solid rgba(255, 42, 58, .6); border-radius: 1px; color: #e4e4ea; white-space: nowrap; margin-top: -1.8em; line-height: 1.2; }
  .tag b { display: block; font-size: 1em; letter-spacing: .14em; }
  .tag i { display: block; font-style: normal; font-size: .72em; color: #9a9aa6; }
  .tag::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 1.6em; background: rgba(255, 42, 58, .65); }
  .tag.lit { border-color: #ff2a3a; box-shadow: 0 0 .8em rgba(255, 42, 58, .45); color: #fff; }
  /* reading the scene: speech bubbles, the step bar (top centre) and the live log (bottom left); hq_hud.mjs */
  .brand { position: fixed; left: 14px; top: 10px; display: flex; gap: 10px; align-items: center; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; z-index: 2; }
  .brand img { height: 30px; width: auto; opacity: .92; filter: drop-shadow(0 0 6px rgba(255, 42, 58, .55)); }
  .brand .word { display: block; font-size: 11px; letter-spacing: .22em; color: #fff; font-weight: 400; cursor: default; }
  .brand .state { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 9px; letter-spacing: .14em; color: #6c6c78; }
  .brand .state em { font-style: normal; }
  .brand .live { width: 5px; height: 5px; border-radius: 50%; background: #55555e; }
  .brand.run .live { background: #ff2a3a; box-shadow: 0 0 6px #ff2a3a; animation: bpulse 1.6s ease-in-out infinite; } .brand.run .state { color: #ffb3ba; }
  @keyframes bpulse { 50% { opacity: .25; } }
  .narrow .brand .word, .narrow .brand .state em { display: none; } .narrow .brand img { height: 22px; }
  .bubbles, .hud, .log { position: fixed; pointer-events: none; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
  .bubbles { inset: 0; }
  .bubble { position: absolute; left: 0; top: 0; max-width: 17em; padding: .4em .7em .45em; background: rgba(6, 6, 8, .9); border: 1px solid rgba(255, 42, 58, .75); color: #f2f2f6; line-height: 1.3; opacity: 0; box-shadow: 0 0 .9em rgba(255, 42, 58, .25); }
  .bubble.pointer::after { content: ""; position: absolute; left: var(--px, 50%); top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: rgba(255, 42, 58, .75); }
  .hud { top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 5px 12px; background: rgba(6, 6, 8, .72); border: 1px solid rgba(255, 42, 58, .35); font-size: 11px; letter-spacing: .12em; color: #6c6c78; white-space: nowrap; }
  .steps { display: flex; gap: 8px; align-items: center; }
  .steps i { font-style: normal; color: #4a4a54; }
  .steps .done { color: #b8b8c4; } .steps .on, .steps .active { color: #ff2a3a; text-shadow: 0 0 8px rgba(255, 42, 58, .6); } .steps .failed { color: #ff8a00; }
  .chip { padding: 1px 7px; border: 1px solid rgba(255, 42, 58, .6); color: #ffb3ba; font-size: 10px; }
  .next { color: #e4e4ea; padding-left: 10px; border-left: 1px solid rgba(255, 42, 58, .35); }
  .log { left: 14px; bottom: 14px; width: min(44em, 40vw); font-size: 11px; line-height: 1.5; color: #d4d4dc; padding: 6px 10px; background: rgba(6, 6, 8, .55); border-left: 2px solid rgba(255, 42, 58, .6); }
  .log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .narrow .log, .narrow .next { display: none !important; }
  .narrow .hud { font-size: 10px; padding: 4px 9px; }