/* ============================================================
   hud.css — cyber-futuristic HUD (shared across all pages)
   ------------------------------------------------------------
   PALETTE-ADAPTIVE: every color is derived from the page's
   --accent (and --accent-dim, when defined) via color-mix(),
   so this one file matches whichever page it's loaded on.

   Per page, set in that page's stylesheet:
       :root { --accent: <theme color>; }
   Optionally set --accent-dim for a two-tone scheme (the home
   page does: cyan + violet). If omitted, a muted version of
   --accent is used for the dimmed elements.

   Tuning knobs:
       --hud-alpha → intensity of the page-wide scanlines,
                      vignette, and shimmer (0 = off, 1 = max)
   ============================================================ */

:root {
    --hud-accent: var(--accent, #9cfffd);
    --hud-dim: var(--accent-dim, color-mix(in srgb, var(--hud-accent) 60%, #565666));
    --hud-ink: color-mix(in srgb, var(--hud-accent) 40%, #ffffff);
    --hud-alpha: .5;
    --hud-font: "source-code-variable", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --hud-size: clamp(.58rem, .5rem + .35vw, .8rem);
}


/* ---------- Page-wide scanlines + vignette ---------- */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: var(--hud-alpha);
    background:
        /* faint CRT scanlines */
        repeating-linear-gradient(0deg,
            color-mix(in srgb, var(--hud-accent) 6%, transparent) 0 1px,
            transparent 1px 3px),
        /* vignette */
        radial-gradient(130% 100% at 50% 42%,
            transparent 58%,
            color-mix(in srgb, var(--hud-accent) 5%, #02040a) 100%);
}

/* slow shimmer band sweeping down the page */
body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 22vh;
    z-index: 91;
    pointer-events: none;
    opacity: calc(var(--hud-alpha) * .7);
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--hud-accent) 5%, transparent) 40%,
        color-mix(in srgb, var(--hud-accent) 13%, transparent) 50%,
        color-mix(in srgb, var(--hud-accent) 5%, transparent) 60%,
        transparent 100%);
    animation: hud-shimmer 9s linear infinite;
}

@keyframes hud-shimmer {
    from { transform: translateY(-24vh); }
    to   { transform: translateY(106vh); }
}


/* ---------- HUD bar frame ---------- */

/* lock the HUD tables to the content-box width so the bar can
   never grow past the screen */
.hud-table {
    table-layout: fixed;
    align-items: center;
    width: 97%;
}

.hud {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(6px, 1vw, 12px) clamp(10px, 2vw, 26px);
    width: 100%;
    max-width: 100%;
    padding: clamp(7px, 1vw, 11px) clamp(10px, 1.5vw, 18px);
    font-family: var(--hud-font);
    font-variation-settings: 'wght' 350;
    font-size: var(--hud-size);
    line-height: 1.35;
    letter-spacing: .18em;
    color: var(--hud-ink);
}


/* faint hairline on the inside edge of each bar */
.hud--top    { border-bottom: 1px solid color-mix(in srgb, var(--hud-accent) 18%, transparent); }
.hud--bottom { border-top: 1px solid color-mix(in srgb, var(--hud-accent) 18%, transparent); }


/* ---------- Groups & micro-labels ---------- */

.hud__group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;   /* reflow instead of forcing the table wider */
    min-width: 0;      /* allow the group to shrink to fit the bar */
    max-width: 100%;   /* hard cap — the group can never exceed the bar */
    gap: clamp(8px, 1.4vw, 20px);
}

.hud__label {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    color: var(--hud-dim);
    letter-spacing: .22em;
    white-space: nowrap;
}

.hud__label--strong {
    color: var(--hud-accent);
    text-shadow: 0 0 9px color-mix(in srgb, var(--hud-accent) 75%, transparent);
}

.hud__sep {
    color: var(--hud-dim);
    opacity: .55;
    padding: 0 .15em;
}

/* pulsing status dot */
.hud__pulse {
    width: .5em;
    height: .5em;
    flex: none;
    background: var(--hud-accent);
    box-shadow: 0 0 6px color-mix(in srgb, var(--hud-accent) 90%, transparent),
                0 0 16px color-mix(in srgb, var(--hud-accent) 45%, transparent);
    animation: hud-pulse 2.2s ease-in-out infinite;
}

@keyframes hud-pulse {
    0%, 100% { opacity: 1;  transform: scale(1); }
    50%      { opacity: .3; transform: scale(.75); }
}


/* ---------- Chips ---------- */

.hud__chip {
    --cut: clamp(3px, .4vw, 6px);
    display: inline-block;
    font-size: .85em;
    padding: .5em .8em .45em .95em;
    border: 1px solid color-mix(in srgb, var(--hud-accent) 55%, transparent);    
    color: var(--hud-accent);
    text-shadow: 0 0 7px color-mix(in srgb, var(--hud-accent) 40%, transparent);
    clip-path: polygon(
        var(--cut) 0,
        100% 0,
        100% calc(100% - var(--cut)),
        calc(100% - var(--cut)) 100%,
        0 100%,
        0 var(--cut)
    );
    letter-spacing: .12em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hud-accent) 25%, transparent));
}

/* dimmed variant (secondary tone) */
.hud__chip--dim {
    border-color: color-mix(in srgb, var(--hud-dim) 50%, transparent);
    color: var(--hud-dim);
    text-shadow: 0 0 6px color-mix(in srgb, var(--hud-dim) 35%, transparent);
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--hud-dim) 20%, transparent));
}


/* ---------- Ticker ---------- */

.hud__ticker {
    flex: 1 1 100%;   /* own full-width row, below the labels + chips */
    order: 3;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.hud__ticker-track {
    display: flex;
    width: max-content;
    animation: hud-ticker 60s linear infinite; /* slow drift */
}

.hud__ticker-track span {
    flex: none;
    white-space: nowrap;
    color: var(--hud-dim);
    opacity: .85;
    letter-spacing: .32em;
}

@keyframes hud-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* ---------- Responsive reflow (phone widths) ---------- */

@media screen and (max-width: 600px) {

    :root {
        --hud-size: clamp(.55rem, 3.4vw, .68rem);
    }

    .hud {
        letter-spacing: .12em;
        gap: 6px 10px;
    }

    .hud__label {
        letter-spacing: .14em;
    }

    .hud__chip {
        letter-spacing: .1em;
        padding: .55em .8em .5em .95em;
    }
}


/* ---------- Accessibility: reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {

    body::after {
        display: none; /* no shimmer sweep */
    }

    .hud__pulse {
        animation: none;
    }

    .hud__ticker-track {
        animation: none;
    }
}