/*
 * MICROWORLD launcher — HOLOGRAPHX HARDWARE skin (v1)
 * Visual only. Keeps the deliberate App Gallery / User Guides italics,
 * the EMULATOR-X and VST-X feature art, and all links.
 * Remove the <link> and body class "hx-hw" to undo.
 */
body.hx-hw {
    --hx-acc: #ff2d3d;
    --hx-acc-rgb: 255, 45, 61;
    background: var(--hx-chassis), #050506 !important;
}

/* Top navigation: raised bar */
body.hx-hw.hx-hw .mw-sitebar {
    background: var(--hx-bar-bg) !important;
    border: 0 !important;
    box-shadow: var(--hx-bar-shadow) !important;
}
body.hx-hw.hx-hw .mw-sitebar a {
    font-family: var(--hx-font) !important;
    letter-spacing: .18em;
    color: var(--hx-ink-2) !important;
}
body.hx-hw.hx-hw .mw-sitebar a:hover { color: #fff !important; text-shadow: 0 0 8px rgba(255,255,255,.4); }

/* Section headings with an LED */
body.hx-hw.hx-hw .shell h2:not(.emulator-title) {
    font-family: var(--hx-font) !important;
    letter-spacing: .24em !important;
    color: #e9e6e2 !important;
    display: flex;
    align-items: center;
    gap: 12px;
}
body.hx-hw.hx-hw .shell h2:not(.emulator-title)::before {
    content: "";
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--hx-acc);
    box-shadow: 0 0 8px var(--hx-acc);
}

/* Platform marks and header links: hardware keys */
body.hx-hw.hx-hw :is(.platform-mark, .donate-link) {
    font-family: var(--hx-font) !important;
    color: #d7d4d0 !important;
    background: var(--hx-key-bg) !important;
    border: 0 !important;
    border-radius: var(--hx-radius-key) !important;
    box-shadow: var(--hx-key-shadow) !important;
}
body.hx-hw.hx-hw .donate-link:hover { filter: brightness(1.2); }

/* App and guide cards: recessed bays that light up on hover */
body.hx-hw.hx-hw :is(.app-card, .guide-card, .gear-card, .marketplace-card) {
    background: var(--hx-well-bg) !important;
    border: 0 !important;
    border-radius: var(--hx-radius-well) !important;
    box-shadow: var(--hx-well-shadow) !important;
}
body.hx-hw.hx-hw :is(.app-card, .guide-card):hover {
    box-shadow: var(--hx-well-shadow), inset 0 0 0 1px color-mix(in srgb, var(--hx-acc) 55%, transparent), 0 0 22px var(--hx-acc-dim) !important;
}
body.hx-hw.hx-hw :is(.app-card, .guide-card):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Thumbnails sit in monitor bezels */
body.hx-hw.hx-hw .app-thumb {
    background: #030304 !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: 0 0 0 4px #111113, 0 0 0 5px #26262a, inset 0 0 18px rgba(0,0,0,.9) !important;
}
body.hx-hw.hx-hw .app-icon {
    background: var(--hx-key-bg) !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: var(--hx-key-shadow) !important;
}
body.hx-hw.hx-hw .app-name {
    font-family: var(--hx-font) !important;
    letter-spacing: .12em;
    color: #f1efec !important;
}
body.hx-hw.hx-hw .app-desc { color: var(--hx-mute) !important; }

/* Store links: keep the gold call to action, in key form */
body.hx-hw.hx-hw .gear-link {
    border: 0 !important;
    border-radius: var(--hx-radius-key) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 #000, 0 3px 6px rgba(0,0,0,.5) !important;
}