/* Shared appearance only. Position, visibility and responsive geometry stay with each feature. */
.hud-dialog{background:var(--hud-surface-overlay);color:var(--hud-text);border:var(--hud-border-width) solid var(--hud-border);border-radius:var(--hud-radius);padding:var(--hud-space-4);box-shadow:var(--hud-shadow);font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);}
.hud-dialog::backdrop{background:var(--hud-surface-glass);}
.hud-choice{background:var(--hud-surface-control);color:var(--hud-text);border:var(--hud-border-width) solid var(--hud-border);border-radius:var(--hud-radius);padding:var(--hud-space-3);font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);text-align:left;cursor:pointer;}
.hud-choice:hover{border-color:var(--hud-accent);}
.hud-choice:disabled{opacity:var(--hud-disabled-opacity);cursor:default;}
.hud-choice.hud-sprite-choice{background:var(--hud-surface-inset);border-color:var(--hud-border);box-shadow:inset 0 var(--hud-border-width) var(--hud-surface-raised);}
.hud-sprite-choice strong{font:var(--hud-text-sm)/var(--hud-leading) var(--hud-font-label);color:var(--hud-text);}
.hud-sprite-choice small{font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);color:var(--hud-text-muted);}
.hud-sprite-choice .hud-choice-action{font:var(--hud-text-xs)/var(--hud-leading) var(--hud-font-label);color:var(--hud-accent);border-top:var(--hud-border-width) solid var(--hud-border-subtle);padding-top:var(--hud-space-2);}
.hud-sprite-choice:not(:disabled):hover{background:var(--hud-surface-raised);border-color:var(--hud-accent);}
.hud-sprite-frame{background:var(--hud-surface-canvas);outline:var(--hud-border-width) solid var(--hud-border-subtle);outline-offset:calc(-1 * var(--hud-border-width));}
.hud-dialog.hud-compact-dialog{padding:var(--hud-space-2);font-size:var(--hud-text-sm);}
.hud-choice.hud-compact-choice{padding:var(--hud-space-2);}
.hud-compact-choice strong,.hud-compact-choice .hud-choice-action{font-size:var(--hud-text-xs);}
.hud-compact-choice small{font-size:var(--hud-text-sm);}
.hud-compact-choice .hud-choice-action{padding-top:var(--hud-space-1);}
.hud-upgrade-choice{background:var(--hud-surface-control);border:var(--hud-border-width) solid var(--hud-border-subtle);border-radius:var(--hud-radius);}
.hud-upgrade-choice[open]{background:var(--hud-surface-inset);border-color:var(--hud-accent);}
.hud-upgrade-choice summary{border-radius:var(--hud-radius);}
.hud-upgrade-choice summary:hover{background:var(--hud-surface-raised);}
.hud-upgrade-choice summary b{font:var(--hud-text-sm)/var(--hud-leading) var(--hud-font-label);color:var(--hud-text);}
.hud-upgrade-choice[open] summary b{color:var(--hud-accent);}
.hud-upgrade-choice .evolutionIcon,.hud-upgrade-choice .signatureConcept{outline:var(--hud-border-width) solid var(--hud-border);outline-offset:calc(-1 * var(--hud-border-width));}
.hud-upgrade-choice .evolutionSlot{font:var(--hud-text-xs)/var(--hud-leading) var(--hud-font-body);color:var(--hud-text-muted);}
.hud-dialog :is(button,summary):focus-visible{outline:var(--hud-border-width) solid var(--hud-focus);outline-offset:var(--hud-space-1);}
.hud-filter{
  font:var(--hud-text-xs)/var(--hud-leading) var(--hud-font-label);
  padding:var(--hud-space-1) var(--hud-space-2);min-height:var(--hud-target);
  background:var(--hud-surface-control);color:var(--hud-text-muted);
  border:var(--hud-border-width) solid var(--hud-border);border-radius:var(--hud-radius);cursor:pointer;
  transition:border-color var(--hud-motion-fast),color var(--hud-motion-fast);
}
.hud-filter:hover{color:var(--hud-text);border-color:var(--hud-focus);}
.hud-filter[aria-pressed="true"]{color:var(--hud-accent);border-color:var(--hud-accent);background:var(--hud-surface-inset);}
.hud-filter:focus-visible{outline:var(--hud-border-width) solid var(--hud-focus);outline-offset:var(--hud-space-1);}
.hud-filter:disabled{opacity:var(--hud-disabled-opacity);cursor:default;}
.hud-signature-status{color:var(--hud-text);font-family:var(--hud-font-body);font-size:var(--hud-text-xs);background:var(--hud-surface-inset);border:var(--hud-border-width) solid var(--hud-border);padding:var(--hud-space-1);border-radius:var(--hud-radius);}
.hud-signature-status progress{accent-color:var(--hud-accent);}
.panel,.hud-panel{
  background:var(--hud-surface-glass);
  border-color:var(--hud-border);
  color:var(--hud-text);
}
#shop,#tip,#hudOptionsDialog,#tutBox{
  background:var(--hud-surface-overlay);
  border-color:var(--hud-border);
  color:var(--hud-text);
  box-shadow:var(--hud-shadow);
}
.settingsHeading{background:var(--hud-surface-raised);border-color:var(--hud-border);}
.settingsNote,#tutText{color:var(--hud-text);font-family:var(--hud-font-body);line-height:var(--hud-leading);}
#tutProgress{color:var(--hud-text-muted);}
#tutTitle,.tutSkill b{color:var(--hud-accent);}
#tutToggle,#btnHudOptions{background:var(--hud-surface-control);border-color:var(--hud-border);color:var(--hud-text);}
#tutClose{background:var(--hud-accent);border-color:var(--hud-accent);color:var(--hud-text-on-accent);}
.btn{border-color:var(--hud-border);border-radius:var(--hud-radius);}
.btn.danger{color:var(--hud-danger);border-color:var(--hud-danger-border);}
.btn:disabled{opacity:var(--hud-disabled-opacity);}
.btn.hud-secondary{background:transparent;color:var(--hud-text-muted);border-color:var(--hud-border-subtle);font-size:var(--hud-text-xs);padding:var(--hud-space-1) var(--hud-space-2);}
.btn.hud-secondary:hover{color:var(--hud-focus);border-color:var(--hud-focus);}
/* Keep focus visible even when a component defines its own hover/selected shadow. */
.btn:focus-visible,#tutBox button:focus-visible,#btnHudOptions:focus-visible,
.slot:focus-visible,.itemSlot:focus-visible,.hud-panel :is(button,input,select):focus-visible,
#hudOptionsDialog :is(button,input,select,summary):focus-visible{
  outline:var(--hud-border-width) solid var(--hud-focus);outline-offset:3px;
}
.slot,.itemSlot{background-color:var(--hud-surface-slot);}
/* Resource colors and ability states remain semantic, never mapped to panel accents. */
.hud-panel{border:var(--hud-border-width) solid var(--hud-border);padding:var(--hud-space-3);}
.hud-stack{display:flex;flex-direction:column;gap:var(--hud-space-2);}
.hud-row{display:flex;align-items:center;gap:var(--hud-space-2);flex-wrap:wrap;}
.hud-copy{font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);color:var(--hud-text-muted);}
.hud-label{font:var(--hud-text-sm)/var(--hud-leading) var(--hud-font-label);color:var(--hud-text);}
.hud-icon{width:24px;height:24px;object-fit:contain;image-rendering:pixelated;flex:none;}
.hud-companion-skill{background:var(--hud-surface-slot);border:var(--hud-border-width) solid var(--hud-border);border-radius:var(--hud-radius);color:var(--hud-text);font:var(--hud-text-xs)/1 var(--hud-font-body);padding:var(--hud-space-1);}
.hud-companion-skill[data-ready="true"]{border-color:var(--hud-focus);}
.hud-companion-skill small{font:inherit;color:var(--hud-text-muted);}
.hud-action{min-height:var(--hud-target);min-width:var(--hud-target);}
@media(prefers-reduced-motion:reduce){
  .btn,.slot,.autoToggle,#tutBarFill{transition:none;animation:none;}
}

/* Shared pixel banner, including notices nested in the tutorial. */
.hud-notice,#banner,#objectiveHint{
  background:var(--hud-surface-glass);
  border:0;
  border-block:var(--hud-border-width) solid var(--hud-notice-ink);
  border-radius:0;
  padding:var(--hud-space-2) var(--hud-space-4);
  color:var(--hud-notice-ink);
  font:var(--hud-text-sm)/var(--hud-leading) var(--hud-font-label);
  letter-spacing:var(--hud-notice-tracking);
  text-transform:uppercase;
  text-align:center;
  text-shadow:none;
  box-shadow:none;
}