/* Shared HUD · Better 16 · Best 32 · Matrix 64 bits (24-sep-2026).
   Scoped to dialog[data-tier-hud]: Good (8 bits) and its chrome are never touched.
   One layout for the three surfaces: plate + live status top-left, selection
   top-right, tools bottom-centre, hints bottom-right. Phosphor + cyan, 80s/90s HUD. */
dialog[data-tier-hud]{--hud-bg:#03121add;--hud-bg-soft:#03121ab8;--hud-line:#3dffd466;--hud-cyan:#3dffd4;--hud-phos:#9dff7a;--hud-amber:#ffd36b;--hud-ink:#d8fbf4;--hud-muted:#86b3ac;--hud-font:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
dialog[data-tier-hud] .tier-hud{position:absolute;inset:0;z-index:2200;pointer-events:none;font-family:var(--hud-font);color:var(--hud-ink)}
dialog[data-tier-hud] .tier-hud-corner{position:absolute;width:22px;height:22px;border:0 solid var(--hud-cyan);opacity:.85;filter:drop-shadow(0 0 3px #3dffd488)}
dialog[data-tier-hud] .tier-hud-corner.tl{top:6px;left:6px;border-top-width:2px;border-left-width:2px}
dialog[data-tier-hud] .tier-hud-corner.tr{top:6px;right:6px;border-top-width:2px;border-right-width:2px}
dialog[data-tier-hud] .tier-hud-corner.bl{bottom:calc(var(--hud-safe-bottom,0px) + 6px);left:6px;border-bottom-width:2px;border-left-width:2px}
dialog[data-tier-hud] .tier-hud-corner.br{bottom:calc(var(--hud-safe-bottom,0px) + 6px);right:6px;border-bottom-width:2px;border-right-width:2px}
dialog[data-tier-hud] .tier-hud-plate{position:absolute;top:14px;left:16px;display:flex;align-items:stretch;border:1px solid var(--hud-line);background:var(--hud-bg);box-shadow:0 0 14px #3dffd422,inset 0 0 12px #3dffd411;backdrop-filter:blur(8px);font-weight:700;letter-spacing:.14em;line-height:1}
dialog[data-tier-hud] .tier-hud-plate>*{display:flex;align-items:center;padding:7px 10px}
dialog[data-tier-hud] .tier-hud-plate b{background:var(--hud-cyan);color:#021016;font-size:11px}
dialog[data-tier-hud] .tier-hud-name{font-size:12px;color:var(--hud-ink);text-shadow:0 0 6px #3dffd466}
dialog[data-tier-hud] .tier-hud-bits{gap:4px;border-left:1px solid var(--hud-line);color:var(--hud-phos);font-size:14px;text-shadow:0 0 8px #9dff7a88}
dialog[data-tier-hud] .tier-hud-bits small{font-size:8px;color:var(--hud-muted);letter-spacing:.2em}
dialog[data-tier-hud] .tier-hud-caption{position:absolute;top:47px;left:16px;margin:0;padding:3px 7px;background:var(--hud-bg-soft);border-left:2px solid var(--hud-cyan);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--hud-ink)}
dialog[data-tier-hud] .tier-hud-live{position:absolute;top:70px;left:16px;margin:0;display:flex;align-items:center;gap:7px;padding:4px 8px;border:1px solid #9dff7a44;background:var(--hud-bg-soft);font-size:9px;letter-spacing:.1em;color:var(--hud-phos);max-width:calc(100% - 300px)}
dialog[data-tier-hud] .tier-hud-live i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--hud-phos);box-shadow:0 0 6px var(--hud-phos);animation:tier-hud-blink 1.6s steps(2,end) infinite}
dialog[data-tier-hud] .tier-hud-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog[data-tier-hud] .tier-hud-clock{color:var(--hud-muted);border-left:1px solid #9dff7a33;padding-left:7px}
dialog[data-tier-hud] .tier-hud-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#0000 0 2px,#00000014 2px 3px);mix-blend-mode:multiply;opacity:.55}
@keyframes tier-hud-blink{50%{opacity:.25}}

/* The old per-surface badges and location cards are replaced by the plate. */
dialog[data-tier-hud] .visual-surface-badge,dialog[data-tier-hud] .life-location{display:none!important}

/* Common panel skin: toolbars, status chips and selection cards of all three. */
dialog[data-tier-hud] :is(.life-lights,.life-camera,.inventory-best-controls,.life-selection,.inventory-best-selection,.matrix-furniture-selection,.inventory-best-label,.matrix-furniture-status,.best-stage figcaption,.best-people-status){border:1px solid var(--hud-line)!important;background:var(--hud-bg)!important;color:var(--hud-ink)!important;border-radius:3px!important;box-shadow:0 0 14px #3dffd41a!important;backdrop-filter:blur(8px);font-family:var(--hud-font)!important}

/* Tools: bottom-centre, same geometry in every tier. */
dialog[data-tier-hud] .life-toolbar{bottom:calc(var(--hud-safe-bottom,0px) + 16px);gap:6px}
dialog[data-tier-hud] .inventory-best-controls{left:50%;bottom:calc(var(--hud-safe-bottom,0px) + 16px);transform:translateX(-50%);gap:3px;padding:4px}
dialog[data-tier-hud] :is(.life-toolbar button,.inventory-best-controls button){border:1px solid transparent!important;border-radius:2px!important;background:transparent!important;color:var(--hud-muted)!important;font:600 10px/1 var(--hud-font)!important;letter-spacing:.08em;text-transform:uppercase;padding:9px 11px!important;min-height:34px}
dialog[data-tier-hud] :is(.life-toolbar button,.inventory-best-controls button):hover{color:var(--hud-ink)!important;border-color:var(--hud-line)!important;filter:none}
dialog[data-tier-hud] :is(.life-toolbar button[aria-pressed=true]){background:var(--hud-cyan)!important;color:#021016!important;box-shadow:0 0 10px #3dffd466}
dialog[data-tier-hud] .life-toolbar [data-zoom]{font-size:15px!important;padding:6px 11px!important}
dialog[data-tier-hud] .life-divider{background:var(--hud-line)}

/* Selection: top-right card. */
dialog[data-tier-hud] :is(.life-selection,.inventory-best-selection,.matrix-furniture-selection){top:14px;right:16px;bottom:auto;left:auto;width:auto;max-width:min(280px,40%);padding:12px 14px;font-size:11px;line-height:1.5;border-left:3px solid var(--hud-amber)!important;color:var(--hud-ink)!important}
dialog[data-tier-hud] .life-selection h2{font-size:15px;letter-spacing:.02em;color:var(--hud-amber)}
dialog[data-tier-hud] .life-selection p,dialog[data-tier-hud] .life-selection-kind{color:var(--hud-muted)!important}
dialog[data-tier-hud] .life-selection-close{color:var(--hud-muted)!important}

/* Surface status lines: under the live strip, never over the tools. */
dialog[data-tier-hud] :is(.inventory-best-label,.matrix-furniture-status,.best-people-status){top:98px;left:16px;bottom:auto;right:auto;max-width:calc(100% - 32px);padding:4px 8px;font-size:9px!important;letter-spacing:.08em;line-height:1.4}
dialog[data-tier-hud] .inventory-best-label.is-error{top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px!important;padding:20px;border-color:var(--hud-amber)!important}
dialog[data-tier-hud] .best-people-status{top:122px}

/* Hints: bottom-right chip. */
dialog[data-tier-hud] .best-stage figcaption{left:auto;right:16px;bottom:calc(var(--hud-safe-bottom,0px) + 16px);transform:none;font-size:9px!important;letter-spacing:.08em;padding:6px 10px;color:var(--hud-muted)!important}
dialog[data-tier-hud] .life-compass{right:22px;bottom:calc(var(--hud-safe-bottom,0px) + 70px);color:var(--hud-cyan);filter:drop-shadow(0 0 4px #3dffd488)}
dialog[data-tier-hud] .life-compass span{font-family:var(--hud-font)}

@media(max-width:700px){
  dialog[data-tier-hud] .tier-hud-plate>*{padding:5px 7px}
  dialog[data-tier-hud] .tier-hud-name{font-size:10px}
  dialog[data-tier-hud] .tier-hud-caption{display:none}
  dialog[data-tier-hud] .tier-hud-live{top:44px;max-width:calc(100% - 32px)}
  dialog[data-tier-hud] :is(.inventory-best-label,.matrix-furniture-status,.best-people-status){top:72px}
  dialog[data-tier-hud] .best-people-status{top:94px}
  dialog[data-tier-hud] :is(.life-selection,.inventory-best-selection,.matrix-furniture-selection){top:auto;bottom:calc(var(--hud-safe-bottom,0px) + 66px);right:10px;max-width:calc(100% - 20px)}
  dialog[data-tier-hud] .best-stage figcaption{display:none}
}
@media(prefers-reduced-motion:reduce){dialog[data-tier-hud] .tier-hud-live i{animation:none}}

/* Better on phones (24-sep-2026): one compact row at the bottom instead of the
   stacked column that covered the middle of the scene. Lights become icons;
   the row scrolls sideways if it still does not fit. */
@media(max-width:760px){
  dialog[data-tier-hud] .life-toolbar{left:8px;right:8px;transform:none;bottom:calc(var(--hud-safe-bottom,0px) + 8px);flex-direction:row;flex-wrap:nowrap;gap:4px;max-width:none;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:flex-start}
  dialog[data-tier-hud] .life-toolbar::-webkit-scrollbar{display:none}
  dialog[data-tier-hud] :is(.life-lights,.life-camera){flex:none;flex-wrap:nowrap;padding:3px;gap:1px;max-width:none}
  dialog[data-tier-hud] .life-lights span{display:none}
  dialog[data-tier-hud] .life-toolbar button{padding:7px 8px!important;min-height:30px;font-size:9px!important;letter-spacing:.04em}
  dialog[data-tier-hud] .life-lights button{font-size:13px!important}
  dialog[data-tier-hud] .life-compass{bottom:calc(var(--hud-safe-bottom,0px) + 52px);right:14px;transform:scale(.8)}
  dialog[data-tier-hud] .inventory-best-controls{bottom:calc(var(--hud-safe-bottom,0px) + 8px)}
}