/* Space Wars 3 design system, shared. Generated by tools/export-design-system.cjs from
 * apps/space-wars/css/hud-components.css (apps/space-wars/docs/hud-design-system.md). Edit the Space Wars
 * source, never this file; every game loads it as shared/ui/hud-components.css.
 * Kept out because the art (or a token that needs it) exists only in Space Wars:
 *   .orbitalCoreIcon { background-image:url('../assets/world/thrones.png') }
 *   .btn.hud-launch::before { mask:url('../assets/ui/launch-swords.svg') center/contain no-repeat }
 *   .btn.hud-launch::before { -webkit-mask:url('../assets/ui/launch-swords.svg') center/contain no-repeat }
 *   .hud-panel.hud-hangar { background:var(--hud-hangar-shade),var(--hud-hangar-image) center/cover no-repeat,var(--hud-surface-inset) }
 *   .hud-currency::before { background:url('../assets/ui/merit-token.png') center/contain no-repeat }
 */
.hud-readout{background:var(--hud-chrome-corner) left top/var(--hud-space-3) var(--hud-space-3) no-repeat,var(--hud-panel-fill);border:var(--hud-border-hairline) solid var(--hud-border-subtle);border-radius:var(--hud-radius);box-shadow:var(--hud-chrome-highlight);color:var(--hud-text);font-variant-numeric:tabular-nums;}
.hud-readout-value{font-family:var(--hud-font-display);font-weight:var(--hud-weight-strong);font-variant-numeric:tabular-nums;line-height:var(--hud-leading-title);}
.hud-readout-label{font-family:var(--hud-font-label);font-weight:var(--hud-weight-label);font-size:var(--hud-text-xs);letter-spacing:var(--hud-tracking-label);color:var(--hud-text-muted);text-transform:uppercase;}
.hud-action-tile{background-color:var(--hud-surface-slot);border-radius:var(--hud-radius);color:var(--hud-text);font-variant-numeric:tabular-nums;box-shadow:var(--hud-chrome-highlight);transition:border-color var(--hud-motion-fast),background-color var(--hud-motion-fast);}
.hud-action-tile:focus-visible{outline:var(--hud-border-width) solid var(--hud-focus);outline-offset:var(--hud-focus-offset);}
.hud-action-tile:not(:disabled):hover{border-color:var(--hud-focus);}
@media(prefers-reduced-motion:reduce){
  .hud-action-tile{transition:none;}
}
.hud-panel.hud-orbital-frame,#heroPanel::before{background:var(--hud-chrome-corner) left top/var(--hud-space-4) var(--hud-space-4) no-repeat,var(--hud-chrome-corner-end) right bottom/var(--hud-space-4) var(--hud-space-4) no-repeat,var(--hud-orbital-fill);border:var(--hud-border-hairline) solid var(--hud-border);box-shadow:var(--hud-chrome-highlight);color:var(--hud-text);}
.panel{border-width:var(--hud-border-hairline);}
#heroPanel .vitalHeading{color:var(--hud-text);font-family:var(--hud-font-body);}
#heroPanel .vitalHeading b{color:var(--hud-health);}
#heroPanel #resourceLabel{color:var(--hud-resource);}
#heroPanel .track{background:var(--hud-surface-inset);border-color:var(--hud-border-subtle);}
.slot,.itemSlot{border-radius:var(--hud-radius);box-shadow:var(--hud-chrome-highlight);}
.slot.ready{border-color:var(--hud-focus);}
.slot.universal{border-color:var(--hud-accent);}
.kfRow{font-family:var(--hud-font-body);}
.orbitalCoreHealth{font-variant-numeric:tabular-nums;color:var(--hud-text);}
.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,button.hud-upgrade-choice 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{font-family:var(--hud-font-label);font-weight:var(--hud-weight-label);background:var(--hud-surface-control);color:var(--hud-text);border:var(--hud-border-hairline) solid var(--hud-border);border-radius:var(--hud-radius);transition:border-color var(--hud-motion-fast),color var(--hud-motion-fast),background-color var(--hud-motion-fast);}
.btn,.hud-action,.hud-choice-action,.hud-filter,.tbtn{text-transform:uppercase;}
.btn:hover{transform:none;}
.btn:active{transform:none;}
.btn.primary{background:var(--hud-accent);border-color:var(--hud-accent);color:var(--hud-text-on-accent);}
.btn.primary:hover{background:var(--hud-accent-hover);border-color:var(--hud-accent-hover);color:var(--hud-text-on-accent);}
.btn.hud-launch,.btn.hud-launch:hover{background:var(--hud-launch-bright);color:var(--hud-text-on-accent);border:var(--hud-border-width) solid var(--hud-launch-edge);box-shadow:var(--hud-launch-shadow);padding:var(--hud-space-4);font-weight:700;text-shadow:none;}
.btn.hud-launch:not(:disabled):hover{border-color:var(--hud-launch-light);color:var(--hud-text-on-accent);}
.btn.hud-launch:not(:disabled):active{box-shadow:var(--hud-launch-pressed);}
.btn.hud-launch:disabled{opacity:1;color:var(--hud-text-muted);background:var(--hud-surface-inset);border-color:var(--hud-border-subtle);box-shadow:none;filter:none;}
.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);}
.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:var(--hud-focus-offset);}
.slot,.itemSlot{background-color:var(--hud-surface-slot);}
.hud-panel{border:var(--hud-border-hairline) solid var(--hud-border-subtle);padding:var(--hud-space-3);}
.hud-panel.hud-command{background:var(--hud-chrome-corner) left top/var(--hud-space-4) var(--hud-space-4) no-repeat,var(--hud-chrome-corner-end) right bottom/var(--hud-space-4) var(--hud-space-4) no-repeat,var(--hud-panel-fill);border-color:var(--hud-border);border-radius:0;box-shadow:var(--hud-chrome-highlight);}
.hud-brand{font:700 var(--hud-title-lg)/var(--hud-leading-title) var(--hud-font-display);color:var(--hud-text);text-shadow:var(--hud-title-shadow);letter-spacing:0;}
.hud-brand em{font-style:normal;color:var(--hud-accent);}
.hud-heading{font:700 var(--hud-title-xl)/var(--hud-leading-title) var(--hud-font-display);color:var(--hud-text);text-shadow:var(--hud-title-shadow);}
.hud-panel.hud-inset{background:var(--hud-surface-inset);border-color:var(--hud-border-subtle);box-shadow:none;}
.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-weight-label) 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;}
}
.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;}
.hud-select{min-height:var(--hud-target);padding:var(--hud-space-2) var(--hud-space-3);color:var(--hud-text);background:var(--hud-surface-inset);border:1px solid var(--hud-border);border-radius:var(--hud-radius);font:var(--hud-text-sm) var(--hud-font-body);}
.hud-choice-key{font:var(--hud-text-xs)/var(--hud-leading) var(--hud-font-label);color:var(--hud-accent);background:var(--hud-surface-inset);border:var(--hud-border-width) solid var(--hud-border);border-radius:var(--hud-radius);padding:0 var(--hud-space-1);}
.hud-dialog{color:var(--hud-text);background:var(--hud-surface-overlay);border:var(--hud-border-width) solid var(--hud-border);border-radius:var(--hud-radius);padding:var(--hud-space-4);font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);box-shadow:var(--hud-shadow);}
.hud-dialog::backdrop{background:var(--hud-surface-glass);}
.hud-dialog :is(button,input,select):focus-visible{outline:var(--hud-border-width) solid var(--hud-focus);outline-offset:var(--hud-space-1);}
body.touch .hud-choice-key{display:none;}
.hud-online-count{color:var(--hud-status-online);font:var(--hud-text-sm)/var(--hud-leading) var(--hud-font-label);}
.hud-compact{background:var(--hud-surface-glass);color:var(--hud-text);border:var(--hud-border-hairline) solid var(--hud-border-subtle);border-radius:var(--hud-radius);font:var(--hud-text-sm)/var(--hud-leading) var(--hud-font-body);padding:var(--hud-space-2);}
.hud-skill-state{color:var(--hud-text);background:var(--hud-surface-glass);font:700 var(--hud-text-count)/1 var(--hud-font-body);font-variant-numeric:tabular-nums;}
.hud-skill-state[data-reason]{font:var(--hud-text-xs)/var(--hud-leading) var(--hud-font-body);}
.hud-state-muted{color:var(--hud-text-muted);}
.hud-reward-display{background:var(--hud-chrome-corner),var(--hud-chrome-corner-end),radial-gradient(ellipse at 50% 75%,color-mix(in srgb,var(--hud-accent) 18%,transparent),transparent 68%),var(--hud-panel-fill);border:var(--hud-border-hairline) solid var(--hud-launch-rim);box-shadow:var(--hud-chrome-highlight);}
.hud-pixel{font-family:var(--hud-font-pixel);}
.hud-numeric{font-family:var(--hud-font-body);font-variant-numeric:tabular-nums lining-nums;}
.hud-label{letter-spacing:var(--hud-tracking-label);}
.hud-input{color:var(--hud-text);background:var(--hud-surface-inset);border:var(--hud-border-hairline) solid var(--hud-border);border-radius:var(--hud-radius);padding:var(--hud-space-2) var(--hud-space-3);font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);}
.hud-input::placeholder{color:var(--hud-text-muted);opacity:1;}
.hud-input[readonly]{background:var(--hud-surface-panel);color:var(--hud-text-muted);}
.hud-input[aria-invalid="true"]{border-color:var(--hud-danger);}
.hud-input:disabled{opacity:var(--hud-disabled-opacity);}
.hud-input:focus-visible{outline:var(--hud-border-width) solid var(--hud-focus);outline-offset:var(--hud-focus-offset);}
.hud-setting{padding:var(--hud-space-2) 0;border-bottom:var(--hud-border-hairline) solid var(--hud-border-subtle);color:var(--hud-text);font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);}
.hud-setting input{accent-color:var(--hud-accent);}
.hud-feedback{font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);color:var(--hud-text-muted);}
.hud-feedback[data-tone="danger"],.hud-badge[data-tone="danger"]{color:var(--hud-danger);}
.hud-feedback[data-tone="success"],.hud-badge[data-tone="success"]{color:var(--hud-status-online);}
.hud-badge{padding:var(--hud-space-1) var(--hud-space-2);border:var(--hud-border-hairline) solid var(--hud-border-subtle);border-radius:var(--hud-radius);background:var(--hud-surface-inset);color:var(--hud-text);font:var(--hud-text-sm)/var(--hud-leading) var(--hud-font-label);}
.hud-data-table{border-collapse:collapse;font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);font-variant-numeric:tabular-nums;color:var(--hud-text);}
.hud-data-table caption{text-align:left;color:var(--hud-text-muted);padding-bottom:var(--hud-space-2);}
.hud-data-table :is(th,td){padding:var(--hud-space-3);text-align:right;border-bottom:var(--hud-border-hairline) solid var(--hud-border-subtle);}
.hud-data-table th:first-child{text-align:left;}
.hud-data-table thead{background:var(--hud-surface-inset);}
.hud-data-table tr[aria-current="true"]{background:var(--hud-surface-raised);}
.hud-team-label[data-team="0"]{color:var(--hud-team-0);}
.hud-team-label[data-team="1"]{color:var(--hud-team-1);}
.hud-team-label[data-team="2"]{color:var(--hud-team-2);}
.hud-empty,.hud-help{padding:var(--hud-space-3);border:var(--hud-border-hairline) solid var(--hud-border-subtle);background:var(--hud-surface-inset);color:var(--hud-text-muted);font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);}
.hud-disclosure{border:var(--hud-border-hairline) solid var(--hud-border-subtle);border-radius:var(--hud-radius);color:var(--hud-text);font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);}
.hud-disclosure[open]{background:var(--hud-surface-inset);}
.hud-disclosure>div,.hud-disclosure>p{padding:var(--hud-space-3);}
.hud-meter{accent-color:var(--hud-accent);}
:root,.hud-scroll{scrollbar-width:thin;scrollbar-color:var(--hud-border-subtle) transparent;}
.hud-scroll{overflow:auto;overscroll-behavior:contain;}
:is(:root,.hud-scroll)::-webkit-scrollbar{width:10px;height:10px;}
:is(:root,.hud-scroll)::-webkit-scrollbar-track{background:var(--hud-surface-slot);border-radius:var(--hud-radius);}
:is(:root,.hud-scroll)::-webkit-scrollbar-thumb{background:var(--hud-border-subtle);border:2px solid transparent;background-clip:padding-box;border-radius:var(--hud-radius);}
:is(:root,.hud-scroll)::-webkit-scrollbar-thumb:hover{background:var(--hud-accent);background-clip:padding-box;}
:is(:root,.hud-scroll)::-webkit-scrollbar-corner{background:transparent;}