/**
 * hud-theme.css — shared design language for HUD panels and info boxes
 * (design "W4", chosen 2026-06 via the design-preview*.html rounds).
 *
 * Three layers:
 *   1. Design tokens (:root custom properties) — change the look here.
 *   2. Primitives — the panel anatomy, named by role (hud-panel/band/...).
 *   3. Composite components — full widgets built from the primitives
 *      (e.g. .hud-shop-prompt).
 *
 * Static styling lives here. Per-instance / computed values (a tooltip
 * anchored to the crosshair, a per-shop accent) are set inline in JS —
 * accent overrides use the variable hook:
 *   el.style.setProperty('--hud-accent', '#ffb000');
 * frame, band, scrollbar and callout all follow it.
 *
 * Migration status (panel-by-panel, style-only steps):
 *   [x] Info Tool tooltip (playerInteract._showInfoPrompt)
 *   [x] Info Tool panel   (infoDisplay.js)
 *   [x] Settings modal scrollbar (animera.ejs, .hud-scroll only)
 *   [x] Shop/location prompt (playerInteract.showShopPrompt — .hud-shop-prompt)
 *   [x] System modals: settings + consent (animera.ejs), invite (invitePanel.js),
 *       debug panel chrome (animera.ejs) — .hud-modal / .hud-band / .hud-section
 *   [x] Paint shop panel chrome (paintShopManager.js — band + square frame,
 *       pink accent kept; 2D face-paint canvas overlay left as-is)
 *   [x] Shop modals — all 9 buy/sell UIs (version A: flush bright banner on a
 *       dark hue-tinted panel, dark band text, square frame + close, 4px
 *       buttons). Per-shop bright accent set inline on the container.
 *   [x] Shop contents — list + detail pane for all 9 shops (shopWindow.js,
 *       .hud-shop* / .hud-qty / .hud-tabs; 2026-09-29)
 *   [x] Planet configuration panel (planetConfigDisplay.js — hud-panel/band/
 *       close + .hud-layer-row; SVG diagram styles embedded)
 *   [x] Player profile panel (playerProfilePanel.js — hud-panel/hud-modal
 *       shell, hud-section stat columns, list-style presence badge; 2026-08-11)
 *   [x] organismModal, containerInfoPanel, organismApplyFeedback,
 *       mediaStatusPanel — hud panels with a .hud-band-notice head (2026-09-27)
 *   [x] Tools HUD (toolHud.js — .hud-toolbar*, bottom centre; docs/Tools_HUD.md)
 *   [x] notifications — spine chips without a band (notificationManager
 *       _buildChip); banners, look-at prompts and the game message boxes are
 *       .hud-notice boxes (2026-09-27)
 *   Size scale (2026-09-27, docs/UI_Style_Proposal.html): band 15 px on
 *   notices and panels (.hud-band-notice), 17 px on windows (.hud-band-win);
 *   text 16 / 15 / 13 / 11 px; close 22 px (.hud-close) and 19 px (-sm).
 *   [x] shop entry prompts (playerInteract.showShopPrompt sets --hud-accent /
 *       --hud-band-text to the matching shop-modal accents)
 *
 * Written spec for new panels and notifications: docs/UI_Style_Guide.md
 */

:root {
    --hud-accent: #00edff;
    --hud-accent-dim: rgba(0, 237, 255, 0.45);
    --hud-accent-strong: rgba(0, 237, 255, 0.7);
    --hud-bg: rgba(0, 0, 0, 0.85);
    --hud-band-text: #021418;
    --hud-text: #e0e0e0;
    --hud-text-brief: #cccccc;
    --hud-text-muted: #7c8794;
    --hud-key: #ffff00;
    --hud-font: 'ZCOOL QingKe HuangYou', cursive;
}

/* Global button-corner standard: all buttons use 4px corners (matching the
   Settings/modal buttons). Buttons that set their own border-radius inline
   still win — those are the stragglers to sweep when found. */
button { border-radius: 4px; }

/* ── Panel frame: square corners, 1px accent border, dark translucent bg ── */
.hud-panel {
    background: var(--hud-bg);
    color: white;
    padding: 0 0 10px 0;
    border: 1px solid var(--hud-accent);
    font-family: var(--hud-font);
    letter-spacing: 0.05em;
    box-sizing: border-box;
}

/* ── Angled uppercase title band (hugs title width, 45° cut right end) ── */
.hud-band {
    background: var(--hud-accent);
    color: var(--hud-band-text);
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    width: max-content;
    max-width: 100%;
    padding: 5px 34px 5px 14px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
}
/* Smaller band for the look-at tooltip */
.hud-band-sm {
    font-size: 17px;
    padding-left: 12px;
}

/* ── Size scale (docs/UI_Style_Proposal.html, 2026-09-27) ──
   Band sizes by topology: 15 px on notices and panels, 17 px on windows.
   Both keep 24 px free right of the cut (margin-right), so a box that
   shrinks to fit never lets the cut touch its frame, and a fixed-width box
   with .hud-fit grows for a long heading. Alerts (radiation, planet
   stability, black-hole warning) add .hud-band-full: a full-width band with
   a centred heading and no cut. */
.hud-band-notice {
    font-size: 15px;
    padding: 4px 28px 4px 12px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
    margin-right: 24px;
    max-width: none;
}
.hud-band-win {
    font-size: 17px;
    padding: 5px 32px 5px 14px;
    margin-right: 24px;
    max-width: none;
}
.hud-band-full {
    width: auto;
    margin-right: 0;
    clip-path: none;
    text-align: center;
    padding: 4px 14px;
}
.hud-fit { min-width: min-content; }

/* Notice: a small headed message (lane items, look-at prompts, game
   messages). Band .hud-band-notice, main line 16 px, secondary 13 px, text
   left-aligned under the band; .alert centres the text under a full band. */
.hud-notice {
    width: max-content;
    min-width: 240px;
    max-width: 420px;
    padding-bottom: 10px;
    text-align: left;
}
.hud-notice.alert { text-align: center; }
.hud-notice-main {
    font-size: 16px;
    line-height: 1.35;
    color: var(--hud-text);
    padding: 8px 14px 0;
    white-space: pre-line;
}
.hud-notice-sec {
    font-size: 13px;
    line-height: 1.35;
    color: var(--hud-text-muted);
    padding: 4px 14px 0;
    white-space: pre-line;
}
.hud-notice-status {
    margin: 10px 14px 0;
    padding: 6px 10px;
    border: 1px solid var(--hud-accent);
    color: var(--hud-accent);
    background: rgba(0, 0, 0, 0.35);
    font-size: 13px;
    line-height: 1.35;
}
.hud-notice.success { --hud-accent: #00ff88; --hud-band-text: #001e05; }
.hud-notice.error   { --hud-accent: #ff4444; --hud-band-text: #2f0405; }
.hud-notice.warning { --hud-accent: #ffaa00; --hud-band-text: #280e00; }
.hud-notice.info    { --hud-accent: #00aaff; --hud-band-text: #001832; }

/* ── Text roles ── */
.hud-brief {
    font-size: 16px;
    color: var(--hud-text-brief);
}
.hud-body {
    color: var(--hud-text);
    font-size: 16px;
    line-height: 1.45;
    white-space: pre-line;
    overflow-y: auto;
    padding: 0 10px 0 14px;
}
.hud-hint {
    font-size: 12px;
    color: var(--hud-text-muted);
    text-align: center;
}
.hud-key {
    color: var(--hud-key);
}

/* ── Scrollbar: thin with SQUARE ends. Webkit pseudos only — the standard
   scrollbar-width/scrollbar-color properties would make Chromium ignore
   these and draw rounded thumb ends. ── */
.hud-scroll::-webkit-scrollbar { width: 7px; }
.hud-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); }
.hud-scroll::-webkit-scrollbar-thumb { background: var(--hud-accent-dim); }
.hud-scroll::-webkit-scrollbar-thumb:hover { background: var(--hud-accent-strong); }

/* ── Shared entrance animations ── */
/* For elements anchored with transform: translate(-100%, -50%) (info boxes) */
@keyframes hudFadeSide {
    from { opacity: 0; transform: translate(-100%, -50%) scale(0.8); }
    to { opacity: 1; transform: translate(-100%, -50%) scale(1); }
}
/* Plain opacity fade (callout lines etc.) */
@keyframes hudFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ════ Composite components ═══════════════════════════════════════════════ */

/* Shop / location prompt — a notice in the top-centre lane. Markup:
   <div class="hud-panel hud-notice hud-shop-prompt"> with a
   .hud-band.hud-band-notice title, a .hud-shop-prompt-action.hud-notice-main
   line and a .hud-shop-prompt-sub.hud-notice-sec line (sizes from .hud-notice).
   The per-shop colour is set in JS via --hud-accent / --hud-band-text. */
/* Lives in the shared top-centre lane (#hud-top-center, created by
   notificationManager) rather than positioning itself, so it cannot land at a
   different height from a banner or overlap one. */
.hud-shop-prompt {
    animation: hudFade 0.3s ease;
}
/* Collapsed state (playerInteract.collapseShopPrompt): once the shop's NPC
   starts talking, the prompt shrinks to "F to enter shop" and sits flush with
   the top screen edge, out of the speech bubble's way. The one sanctioned
   exception to "entry prompts live in the lane" — the element is moved to
   <body> because the transformed lane cannot host a fixed child at top: 0.
   Stays collapsed until the player re-enters the trigger. */
.hud-shop-prompt.collapsed {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2500; /* same level as the lane */
    min-width: 0;
    /* Spine-chip anatomy (.notification-chip): thick leading accent block,
       tinted fill, 16 px text. Frame at double the panel's 1px line; top edge
       open — flush with the screen edge. */
    border: 2px solid var(--hud-accent);
    border-top: none;
    border-left: 8px solid var(--hud-accent);
    background: color-mix(in srgb, var(--hud-accent) 18%, var(--hud-bg));
    padding: 7px 16px 8px 14px;
}
.hud-shop-prompt.collapsed .hud-band,
.hud-shop-prompt.collapsed .hud-shop-prompt-sub,
.hud-shop-prompt.collapsed .hud-shop-prompt-press {
    display: none;
}
/* " shop" suffix exists only in the collapsed reading ("F to enter shop") */
.hud-shop-prompt-collapsed-only {
    display: none;
}
.hud-shop-prompt.collapsed .hud-shop-prompt-collapsed-only {
    display: inline;
}
.hud-shop-prompt.collapsed .hud-shop-prompt-action {
    padding: 0;
    font-size: 16px;
    line-height: 1.3;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

/* Modal chrome — full panels with an angled title band, a close button and a
   scrollable body. Combine `.hud-panel .hud-modal` and set --hud-accent /
   --hud-bg / --hud-band-text for the modal's color. The panel is a flex
   column so the band/close stay fixed and .hud-modal-body scrolls. */
.hud-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}
.hud-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex: 0 0 auto;
}
/* Window close: 22 px (size scale 2026-09-27; was 30 px) */
.hud-close {
    margin: 6px 8px 0 0;
    width: 22px;
    height: 22px;
    padding: 0;
    line-height: 1;
    background: transparent;
    border: 1px solid var(--hud-accent);
    color: var(--hud-accent);
    font-size: 13px;
    cursor: pointer;
    font-family: var(--hud-font);
}
.hud-close:hover { background: rgba(255, 255, 255, 0.06); }
/* Smaller close button (online list / docked friends panel) */
.hud-close-sm {
    width: 19px;
    height: 19px;
    font-size: 11px;
    padding: 0;
    margin: 5px 6px 0 0;
}
.hud-modal-body {
    padding: 14px 16px 2px;
    overflow-y: auto;
    flex: 1 1 auto;
}
.hud-section {
    color: var(--hud-accent);
    font-size: 15px;
    margin: 16px 0 8px;
}
.hud-section:first-child { margin-top: 0; }
.hud-rule {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 14px 0;
}
/* Squared-off controls inside modals (reduced roundness to match the frame) */
.hud-modal button,
.hud-modal input,
.hud-modal select { border-radius: 4px; }

/* ---- Planet configuration panel (planetConfigDisplay.js) ----
   Side panel of the layer-configuration overlay. The SVG diagram's own
   classes (.pcfg-*) live in an embedded <style> inside the SVG
   (radialHexMenu precedent), not here. */
.hud-layer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px 4px;
    font-size: 13px;
    color: var(--hud-text);
    letter-spacing: 0.05em;
}
.hud-layer-row i {
    width: 12px;
    height: 12px;
    flex: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.hud-layer-row .pcfg-range {
    margin-left: auto;
    font-size: 12px;
    color: var(--hud-text-muted);
}

/* ---- Tools HUD (toolHud.js) ----
   Bottom-centre bar: one 46px slot per tool, the active slot scaled 1.28 in
   place inside a fixed accent frame at screen centre, the row glides so the
   chosen slot lands in the frame (slot transforms/opacity are computed in JS),
   a straight name band above. Per-tool colour arrives as --hud-accent /
   --hud-band-text on #toolHud. The root is a zero-size anchor so the bar
   never takes pointer events; body.game-ready (animera.ejs) reveals it. */
.hud-toolbar {
    position: fixed;
    left: 50%;
    bottom: 34px;
    width: 0;
    height: 0;
    z-index: 10; /* same layer as the health readout it replaced */
}
.hud-toolbar-body {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateX(-50%);
    pointer-events: none;
    font-family: var(--hud-font);
    letter-spacing: 0.05em;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.7);
    transition: opacity 0.6s ease;
}
/* At rest (TOOL_HUD_REST_DELAY_MS after a switch) the bar sits back a little */
.hud-toolbar.rest .hud-toolbar-body { opacity: 0.68; }
/* Stowed: only the Info Tool is owned, the arrival intro is running, or a shop /
   modal is open (toolHud.js) */
.hud-toolbar.stowed .hud-toolbar-body { opacity: 0; }
/* Vertical padding so the scaled active slot and the frame glow are not
   clipped by the edge mask; the mask fades slots that glide off the ends. */
.hud-toolbar-track {
    position: relative;
    height: 70px;
    width: clamp(300px, calc(100vw - 880px), 640px);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}
.hud-toolbar-slot {
    position: absolute;
    left: 50%;
    top: 12px;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.32s, background 0.32s, border-color 0.32s;
}
.hud-toolbar-slot i {
    font-style: normal;
    line-height: 1;
    transform: translateY(2px);
}
.hud-toolbar-key {
    position: absolute;
    top: 1px;
    left: 4px;
    font-size: 10px;
    font-weight: normal;
    line-height: 1;
    color: var(--hud-text-muted);
}
.hud-toolbar-key.hex { font-size: 9px; }
.hud-toolbar-slot.locked { border-style: dashed; }
.hud-toolbar-slot.locked i { filter: grayscale(1); }
.hud-toolbar-slot.locked em {
    position: absolute;
    right: 2px;
    bottom: 1px;
    font-size: 9px;
    font-style: normal;
    line-height: 1;
}
.hud-toolbar-slot.active {
    background: rgba(0, 0, 0, 0.82);
    border-color: transparent;
}
.hud-toolbar-frame {
    position: absolute;
    left: 50%;
    top: 12px;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    z-index: 20; /* above the slots (inline z-index <= 10) so the outline draws over the active slot */
    transform: scale(1.28);
    border: 2px solid var(--hud-accent); /* plain outline — no glow or blur */
    transition: border-color 0.3s;
}
.hud-toolbar-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    white-space: nowrap;
}
/* Straight band (the angled .hud-band needs a box with room right of the cut) */
.hud-toolbar-band {
    background: var(--hud-accent);
    color: var(--hud-band-text);
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    padding: 3px 5px 3px 6px;
    text-shadow: none;
}
.hud-toolbar-band.anim { animation: hudToolbarUnroll 0.25s ease-out; }
@keyframes hudToolbarUnroll {
    from { clip-path: inset(0 calc(100% - 6px) 0 0); transform: translateX(calc(50% - 3px)); }
    to   { clip-path: inset(0 0 0 0);                transform: translateX(0); }
}
/* Touch portrait: clear the joystick (bottom-left) and the chat input */
@media (max-width: 600px) {
    .hud-toolbar { bottom: 180px; }
}

/* ── Shop windows (shopWindow.js, 2026-09-29) ──
   All nine shops: band + close, a brief line (subtitle, credits), then the
   items as a list (left) and the selected item's details with its BUY / SELL
   (right). Per shop only --hud-accent, --hud-band-text and --shop-bg are set
   inline. In shop mode the virtual cursor sets .vc-hover on the innermost
   element instead of :hover (controls.js); row children take no pointer
   events, so the row is that element. Touch: touch-panels.css. */
.hud-shop {
    --hud-accent-dim: color-mix(in srgb, var(--hud-accent) 45%, transparent);
    --hud-accent-strong: color-mix(in srgb, var(--hud-accent) 70%, transparent);
    --hud-shop-tint: color-mix(in srgb, var(--hud-accent) 14%, transparent);
    --hud-shop-line: rgba(255, 255, 255, 0.12);
    --hud-credits: #ffaa00;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    box-sizing: border-box;
    width: 900px;
    max-width: calc(100vw - 40px);
    height: min(560px, calc(100vh - 40px));
    display: none; /* shown with display: flex (shopWindow.show) */
    flex-direction: column;
    background: var(--shop-bg);
    border: 1px solid var(--hud-accent);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    color: var(--hud-text);
    font-family: var(--hud-font);
    letter-spacing: 0.05em;
}
:where(.hud-shop) :where(button, input) { font-family: var(--hud-font); letter-spacing: inherit; }
.hud-shop-head { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: flex-start; }
.hud-shop-head .hud-close { margin: 8px 8px 0 0; }
.hud-shop .hud-close.vc-hover { background: rgba(255, 255, 255, 0.06); }

/* Brief line: subtitle left, credits right */
.hud-shop-brief {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 8px 16px 12px;
}
.hud-shop-sub { font-size: 13px; color: var(--hud-text-muted); }
.hud-shop-credits { font-size: 15px; color: var(--hud-credits); white-space: nowrap; }

/* Tabs (Restaurant): text, accent underline on the active one */
.hud-tabs { flex: 0 0 auto; display: flex; gap: 4px; padding: 0 8px; }
.hud-tab {
    padding: 6px 12px 10px;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--hud-text-muted);
    font-size: 15px;
    cursor: pointer;
}
.hud-tab:is(:hover, .vc-hover) { color: var(--hud-text); }
.hud-tab.active { color: var(--hud-accent); box-shadow: inset 0 -2px 0 var(--hud-accent); }

/* Body: list | detail */
.hud-shop-body { flex: 1 1 auto; min-height: 0; display: flex; border-top: 1px solid var(--hud-shop-line); }
.hud-shop-listcol {
    flex: 0 0 52%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--hud-shop-line);
}
.hud-shop-list { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 8px 12px; }
.hud-shop-listfoot { flex: 0 0 auto; padding: 10px 8px; border-top: 1px solid var(--hud-shop-line); }
.hud-shop-group {
    padding: 14px 8px 6px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hud-text-muted);
}
.hud-shop-row {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    padding: 0 8px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--hud-text);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}
.hud-shop-row > * { pointer-events: none; }
.hud-shop-row:is(:hover, .vc-hover) { background: rgba(255, 255, 255, 0.05); }
.hud-shop-row:focus-visible { outline: 1px solid var(--hud-accent); outline-offset: -1px; }
.hud-shop-row.selected { background: var(--hud-shop-tint); }
.hud-shop-row.selected .hud-shop-rowname { color: var(--hud-accent); }
.hud-shop-row.dim > * { opacity: 0.5; }
.hud-shop-row .hud-shop-icon { flex: 0 0 24px; font-size: 20px; line-height: 1; text-align: center; }
.hud-shop-row img.hud-shop-icon { width: 24px; height: 24px; object-fit: contain; }
.hud-shop-rowname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-shop-held { font-size: 13px; color: var(--hud-text-brief); }
.hud-shop-value { min-width: 36px; text-align: right; font-size: 15px; color: var(--hud-credits); white-space: nowrap; }
.hud-shop-value.owned { font-size: 13px; color: var(--hud-accent); }
.hud-shop-value.muted { font-size: 13px; color: var(--hud-text-muted); }
/* Mineral colour swatch in place of an icon */
.hud-shop-swatch { display: flex; align-items: center; justify-content: center; }
.hud-shop-swatch::before { content: ""; width: 10px; height: 10px; background: var(--swatch); transform: rotate(45deg); }

/* Detail pane */
.hud-shop-detail {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 20px 16px;
    overflow-y: auto;
}
/* The item's 3D model, spinning on the shop's fill (shopModelPreview.js); it replaces the title icon */
.hud-shop-model { display: block; width: 100%; height: 180px; margin-bottom: 14px; }
.hud-shop-title { display: flex; align-items: center; gap: 14px; }
.hud-shop-title .hud-shop-icon { flex: 0 0 48px; font-size: 40px; line-height: 1; text-align: center; }
.hud-shop-title img.hud-shop-icon { width: 48px; height: 48px; object-fit: contain; }
.hud-shop-title .hud-shop-swatch { height: 48px; }
.hud-shop-title .hud-shop-swatch::before { width: 26px; height: 26px; }
.hud-shop-kind { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hud-text-muted); }
.hud-shop-name { margin-top: 2px; font-size: 17px; font-weight: bold; color: var(--hud-accent); }
.hud-shop-desc { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--hud-text-brief); }
.hud-shop-facts {
    margin: 14px 0 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    font-size: 13px;
    line-height: 1.4;
}
.hud-shop-facts dt { color: var(--hud-text-muted); }
.hud-shop-facts dd { margin: 0; color: var(--hud-text); }
.hud-shop-facts dd.accent { color: var(--hud-accent); }

/* Purchase block, pinned to the bottom of the detail pane */
.hud-shop-buy { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.hud-shop-buyline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hud-shop-total { font-size: 13px; color: var(--hud-text-muted); white-space: nowrap; }
.hud-shop-total b { margin-left: 8px; font-size: 15px; font-weight: normal; color: var(--hud-credits); }
.hud-shop-reason { font-size: 13px; color: #ff4444; }
.hud-shop-primary {
    width: 100%;
    padding: 10px 18px;
    border: none;
    border-radius: 4px;
    background: var(--hud-accent);
    color: var(--hud-band-text);
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.1em;
    cursor: pointer;
}
.hud-shop-primary:not(:disabled):is(:hover, .vc-hover) { opacity: 0.88; }
.hud-shop-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.hud-shop-secondary {
    width: 100%;
    padding: 8px 14px;
    border: 1px solid color-mix(in srgb, var(--hud-accent) 50%, transparent);
    border-radius: 4px;
    background: color-mix(in srgb, var(--hud-accent) 8%, transparent);
    color: var(--hud-accent);
    font-size: 15px;
    cursor: pointer;
}
.hud-shop-secondary:not(:disabled):is(:hover, .vc-hover) { background: color-mix(in srgb, var(--hud-accent) 16%, transparent); }
.hud-shop-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.hud-shop-status { font-size: 15px; color: var(--hud-text-brief); }
.hud-shop-status.owned { color: var(--hud-accent); }

/* Quantity control (shopEconomyRows.createQuantityControl): − [field] + */
.hud-qty { display: flex; align-items: center; gap: 4px; }
.hud-qty button {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid var(--hud-accent);
    border-radius: 4px;
    background: transparent;
    color: var(--hud-accent);
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}
.hud-qty button:is(:hover, .vc-hover) { background: rgba(255, 255, 255, 0.06); }
.hud-qty input {
    box-sizing: border-box;
    width: 52px;
    height: 28px;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--hud-accent) 40%, transparent);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    color: #f5f5f5;
    font-size: 15px;
    text-align: center;
    -moz-appearance: textfield;
}
.hud-qty input::-webkit-outer-spin-button,
.hud-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Footer: close hint */
.hud-shop-foot {
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--hud-text-muted);
    text-align: center;
    border-top: 1px solid var(--hud-shop-line);
    background: rgba(0, 0, 0, 0.2);
}

/* Table in a detail pane (Hardware Store: material types) */
.hud-shop-table {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr auto 130px;
    gap: 4px 14px;
    align-items: center;
    font-size: 13px;
}
.hud-shop-table .th { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hud-text-muted); }
.hud-shop-table .num { text-align: right; }
.hud-shop-meter { display: flex; align-items: center; gap: 8px; }
.hud-shop-meter span { min-width: 22px; text-align: right; }
.hud-shop-meter-bar { flex: 1; height: 4px; background: rgba(255, 255, 255, 0.1); }
.hud-shop-meter-bar i { display: block; height: 100%; background: var(--hud-accent); }