/*
 * V-KEY — HOLOGRAPHX HARDWARE skin (v1)
 * Loaded last. Visual only on desktop and landscape.
 * Portrait phones get an authored compact layout (CSS only) instead of the
 * shrunken 1280×720 canvas. Remove the <link> and body class "hx-hw" to undo.
 */

body.hx-hw {
    --hx-acc: #27c6ff;
    --hx-acc-rgb: 39, 198, 255;
    background: #050506 !important;
}

/* ---------- Chassis ---------- */
body.hx-hw.hx-hw #app-container {
    background: var(--hx-chassis) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px #1d1d20;
}

body.hx-hw.hx-hw #app-title {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: .3em !important;
    color: #f1efec !important;
    text-shadow: 0 1px 0 #000 !important;
    display: flex;
    align-items: center;
    gap: 12px;
}
body.hx-hw.hx-hw #app-title::before {
    content: "";
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 38%, #fff 0, var(--hx-acc) 22%, rgba(0,0,0,.6) 40%, #1b1b1e 41% 56%, #0a0a0b 57%);
    box-shadow: inset 0 0 0 2px #2c2c30, 0 0 12px var(--hx-acc-dim);
}

/* Panels become recessed wells */
body.hx-hw.hx-hw #app-container :is(.control-group, #midi-panel) {
    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 #app-container :is(.control-label, .device-label, .scale-sub-label) {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase;
    color: var(--hx-mute) !important;
    text-shadow: none !important;
}

/* Keys */
body.hx-hw.hx-hw #app-container :is(.control-btn, .fullscreen-btn, .device-toggle-button) {
    font-family: var(--hx-font) !important;
    font-weight: 700 !important;
    letter-spacing: .12em !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;
    text-shadow: none !important;
}
body.hx-hw.hx-hw #app-container .device-toggle-button:is(.is-active, [aria-pressed="true"]) {
    color: #fff !important;
    background: var(--hx-key-on-bg) !important;
    box-shadow: var(--hx-key-on-shadow) !important;
}

/* LCD readouts */
body.hx-hw.hx-hw #app-container :is(.control-value, .wheel-value) {
    font-family: var(--hx-font) !important;
    font-weight: 700 !important;
    color: var(--hx-acc) !important;
    text-shadow: 0 0 10px var(--hx-acc-glow) !important;
    background: var(--hx-lcd-lines), var(--hx-lcd-bg) !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: var(--hx-lcd-shadow) !important;
}
body.hx-hw.hx-hw #note-display {
    background: var(--hx-lcd-lines), var(--hx-lcd-bg) !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: var(--hx-lcd-shadow) !important;
}
body.hx-hw.hx-hw #note-display :is(.current-note, .current-midi) {
    font-family: var(--hx-font) !important;
    font-style: normal !important;
    color: var(--hx-acc) !important;
    text-shadow: 0 0 12px var(--hx-acc-glow) !important;
}
body.hx-hw.hx-hw #note-display .current-midi { opacity: .75; letter-spacing: .14em; }
body.hx-hw.hx-hw #keyboard-help {
    font-family: var(--hx-mono) !important;
    color: var(--hx-mute) !important;
    background: #0c0c0e !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 3px #000, inset 0 0 0 1px #1c1c1f !important;
}

/* Selects in this app use their own classes */
body.hx-hw.hx-hw #app-container :is(.control-select, .device-select) {
    font-family: var(--hx-font) !important;
    color: var(--hx-ink) !important;
    background-color: #0d0d0f !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: inset 0 2px 5px #000, inset 0 0 0 1px #202024, 0 1px 0 rgba(255,255,255,.05) !important;
}

/* ---------- Pitch and mod wheels: ridged cylinder in a slot ---------- */
body.hx-hw.hx-hw .wheel-track {
    background: linear-gradient(180deg, #070708, #111113) !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: inset 0 2px 8px #000, inset 0 0 0 1px #1c1c1f !important;
}
body.hx-hw.hx-hw .vertical-wheel {
    accent-color: var(--hx-acc) !important;
    background:
        repeating-linear-gradient(180deg, rgba(0,0,0,.45) 0 2px, transparent 2px 7px),
        linear-gradient(90deg, #0c0c0d 0, #3a3a3e 45%, #4a4a4f 50%, #3a3a3e 55%, #0c0c0d 100%) !important;
    border-radius: 6px !important;
    border: 0 !important;
    box-shadow: inset 0 0 0 1px #000 !important;
}
body.hx-hw.hx-hw .vertical-wheel::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 100%;
    min-width: 40px;
    height: 10px;
    border-radius: 3px;
    background: var(--hx-acc);
    box-shadow: 0 0 12px var(--hx-acc), 0 0 0 1px #000;
    border: 0;
}
body.hx-hw.hx-hw .vertical-wheel::-moz-range-thumb {
    width: 40px;
    height: 10px;
    border-radius: 3px;
    background: var(--hx-acc);
    box-shadow: 0 0 12px var(--hx-acc);
    border: 0;
}

/* ---------- Keyboard: ivory and ebony ---------- */
body.hx-hw.hx-hw #app-container #keyboard-overlay {
    background: linear-gradient(180deg, #0a0a0b, #18181b) !important;
    border-top: 0 !important;
    box-shadow: inset 0 3px 8px #000, 0 -1px 0 rgba(255,255,255,.06) !important;
    padding: 6px 6px 8px;
    box-sizing: border-box;
}
body.hx-hw.hx-hw .white-key {
    font-family: var(--hx-font) !important;
    font-weight: 600 !important;
    color: #555 !important;
    border: 0 !important;
    margin: 0 1px;
    border-radius: 0 0 8px 8px !important;
    background: linear-gradient(180deg, #d9d6d0 0, #fbfaf7 10%, #f2f0ec 86%, #d4d1cb 100%) !important;
    box-shadow: inset 0 -7px 0 #c9c5be, inset -1px 0 0 #bdb9b2, 0 3px 4px rgba(0,0,0,.6) !important;
}
body.hx-hw.hx-hw .black-key {
    font-family: var(--hx-font) !important;
    color: #8a8884 !important;
    border: 0 !important;
    border-radius: 0 0 6px 6px !important;
    background: linear-gradient(180deg, #000 0, #2a2a2e 70%, #141416 100%) !important;
    box-shadow: inset 0 -6px 0 #050505, inset 1px 0 0 #3a3a3e, 0 3px 6px rgba(0,0,0,.75) !important;
}
body.hx-hw.hx-hw .white-key.active {
    color: #0b4a60 !important;
    background: linear-gradient(180deg, #cfcac2 0, #ebe8e3 20%, #e2dfd9 100%) !important;
    box-shadow: inset 0 -2px 0 #c9c5be, inset 0 0 0 2px var(--hx-acc), 0 0 18px var(--hx-acc-glow) !important;
}
body.hx-hw.hx-hw .black-key.active {
    color: var(--hx-acc) !important;
    box-shadow: inset 0 -2px 0 #050505, inset 0 0 0 2px var(--hx-acc), 0 0 16px var(--hx-acc-glow) !important;
}

/* =========================================================
 * Portrait phones: compact layout instead of a tiny canvas
 * ========================================================= */
@media (orientation: portrait) and (max-width: 600px) {
    body.hx-hw.hx-hw { overflow: hidden; }

    body.hx-hw.hx-hw #app-container {
        position: fixed !important;
        inset: 0 !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        transform: none !important;
        display: grid !important;
        grid-template-columns: 124px minmax(0, 1fr);
        grid-template-rows: 56px auto auto auto minmax(230px, 1fr);
        grid-template-areas:
            "head head"
            "note note"
            "wheels ctrls"
            "midi midi"
            "keys keys";
        gap: 10px;
        padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0;
        box-sizing: border-box;
        overflow: hidden;
    }
    body.hx-hw.hx-hw #app-container > * {
        position: static !important;
        transform: none !important;
        inset: auto !important;
        margin: 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: auto !important;
    }

    body.hx-hw.hx-hw #header {
        grid-area: head;
        display: flex !important;
        align-items: center;
        padding: 0 12px !important;
        border-radius: 12px;
        background: var(--hx-bar-bg) !important;
        box-shadow: var(--hx-bar-shadow) !important;
    }
    body.hx-hw.hx-hw #app-title {
        position: static !important;
        transform: none !important;
        font-size: 20px !important;
    }
    body.hx-hw.hx-hw #fullscreen-container {
        grid-area: head;
        justify-self: end;
        align-self: center;
        margin-right: 8px !important;
        z-index: 2;
    }
    body.hx-hw.hx-hw #fullscreen-container .fullscreen-btn {
        width: 44px !important;
        height: 44px !important;
    }

    body.hx-hw.hx-hw #note-display {
        grid-area: note;
        display: flex !important;
        align-items: baseline;
        justify-content: space-between;
        padding: 10px 16px !important;
    }
    body.hx-hw.hx-hw #note-display .current-note { font-size: 34px !important; font-weight: 900 !important; }
    body.hx-hw.hx-hw #note-display .current-midi { font-size: 13px !important; }

    body.hx-hw.hx-hw #wheel-container {
        grid-area: wheels;
        display: flex !important;
        gap: 10px;
        height: 216px !important;
    }
    body.hx-hw.hx-hw #wheel-container .wheel-group {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        min-width: 0;
    }
    body.hx-hw.hx-hw #wheel-container .wheel-track {
        flex: 1;
        width: 100% !important;
        padding: 8px 6px;
        box-sizing: border-box;
        align-items: center;
        gap: 6px;
    }
    body.hx-hw.hx-hw #wheel-container .vertical-wheel {
        width: 40px !important;
        min-width: 40px !important;
        min-height: 0 !important;
        flex: 1;
    }
    body.hx-hw.hx-hw #wheel-container .wheel-value {
        font-size: 12px !important;
        padding: 2px 6px;
    }
    body.hx-hw.hx-hw #wheel-container .control-label { font-size: 11px !important; }

    body.hx-hw.hx-hw #left-controls {
        grid-area: ctrls;
        display: flex !important;
        flex-direction: column;
        gap: 8px;
    }
    body.hx-hw.hx-hw #left-controls .control-group {
        padding: 8px 10px !important;
        gap: 6px;
        display: flex;
        flex-direction: column;
    }
    body.hx-hw.hx-hw #left-controls .control-label { font-size: 11px !important; }
    body.hx-hw.hx-hw #left-controls .control-buttons {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    body.hx-hw.hx-hw #left-controls .control-btn {
        width: 44px !important;
        height: 40px !important;
        flex-shrink: 0;
    }
    body.hx-hw.hx-hw #left-controls .control-value {
        flex: 1;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px !important;
    }
    body.hx-hw.hx-hw #left-controls .scale-control-grid {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
        gap: 6px;
    }
    body.hx-hw.hx-hw #left-controls .scale-sub-label { display: none; }
    body.hx-hw.hx-hw #left-controls .control-select {
        width: 100% !important;
        height: 36px;
        font-size: 12px !important;
    }

    body.hx-hw.hx-hw #midi-panel {
        grid-area: midi;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
        padding: 10px 12px !important;
        overflow: visible !important;
    }
    body.hx-hw.hx-hw #midi-panel .device-section { margin: 0 !important; min-width: 0; }
    body.hx-hw.hx-hw #midi-panel .device-row-split { display: contents !important; }
    body.hx-hw.hx-hw #midi-panel .device-label { font-size: 10px !important; margin-bottom: 4px; }
    body.hx-hw.hx-hw #midi-panel .device-select,
    body.hx-hw.hx-hw #midi-panel .device-toggle-button {
        width: 100% !important;
        height: 36px !important;
        font-size: 12px !important;
    }

    body.hx-hw.hx-hw #keyboard-help { display: none !important; }

    body.hx-hw.hx-hw #app-container #keyboard-overlay {
        grid-area: keys;
        position: relative !important;
        height: auto !important;
        margin: 0 -12px !important;
        padding: 6px 4px calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    }
    html body.hx-hw.hx-hw #app-container #keyboard-overlay .white-key.piano-key {
        font-size: 9px !important;
        letter-spacing: 0 !important;
        padding-bottom: 14px !important;
        margin: 0 .5px;
        border-radius: 0 0 5px 5px !important;
    }
    html body.hx-hw.hx-hw #app-container #keyboard-overlay .black-key.piano-key {
        width: 5.2% !important;
        height: 58% !important;
        font-size: 0 !important;
        color: transparent !important;
    }
}

/* On-demand keyboard legend below the READY display. */
body.hx-hw #keyboard-guide { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); z-index:110; }
body.hx-hw #keyboard-guide summary { display:flex; align-items:center; justify-content:center; width:38px; height:28px; padding:0; list-style:none; cursor:pointer; color:#b9c4c8; background:var(--hx-key-bg); border:1px solid #34383d; border-radius:6px; box-shadow:var(--hx-key-shadow); touch-action:manipulation; }
#keyboard-guide summary::-webkit-details-marker { display:none; }
#keyboard-guide summary:focus-visible { outline:2px solid #00dfff; outline-offset:3px; }
body.hx-hw #keyboard-guide[open] summary { color:var(--hx-acc); }
body.hx-hw.hx-hw #note-display #keyboard-help { display:block !important; position:absolute !important; top:calc(100% + 6px); bottom:auto; left:50%; transform:translateX(-50%); width:min(400px,calc(100vw - 32px)); max-width:none; margin:0; padding:10px 12px; background:#101114 !important; border:1px solid #34383d; font-size:14px !important; line-height:1.4; box-shadow:0 6px 18px #0009; }
body.hx-hw.hx-hw #keyboard-guide:not([open]) #keyboard-help { display:none !important; }
@media (orientation:portrait) and (max-width:600px) {
 body.hx-hw.hx-hw #app-container #note-display { position:relative !important; margin-bottom:34px !important; }
}