/**
 * HUD Key Legend — Left-edge keyboard shortcut overlay (60% height).
 *
 * Subtle, unobtrusive: small font, dark grey, low opacity.
 * Hidden by default — fades in on keypress, auto-hides after 10s.
 *
 * Used by: hud-key.js (singleton, global).
 * Prefix: .mm-hud-key*
 */

.mm-hud-key {
    position: fixed;
    top: 60%;
    left: 34px;
    z-index: var(--ase-z-persist-hud, 800);
    display: grid;
    grid-template-columns: auto auto;
    gap: 1px 5px;
    font-family: var(--ase-font-mono, monospace);
    font-size: 8px;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.mm-hud-key.mm-hud-key-visible {
    opacity: 1;
}

.mm-hud-key-key {
    text-align: right;
    color: rgba(255, 255, 255, 0.25);
}

.mm-hud-key-label {
    text-align: left;
    color: rgba(255, 255, 255, 0.15);
}

/* Toggle state: stays red while feature is ON (ALT+C, ALT+G) */
.mm-hud-key-key.mm-hud-key-active,
.mm-hud-key-label.mm-hud-key-active {
    color: var(--ase-mm-hud-active, #7f1d1e);
}

/* Momentary flash: red for 3s then fade back (↑, ↓, Space) — SSOT duration */
.mm-hud-key-key.mm-hud-key-flash,
.mm-hud-key-label.mm-hud-key-flash {
    animation: mm-hud-flash 3s ease-out forwards;
}

@keyframes mm-hud-flash {
    0%, 60% { color: var(--ase-mm-hud-active, #7f1d1e); }
    100% { color: inherit; }
}