:root {
    --neon-cyan: #00FFFF;
    --neon-magenta: #FF00FF;
    --neon-black: #0A0A0A;
    --panel-black: #141414;
    --text-primary: #E6FFFF;
    --text-dim: #8FA3A3;

    --hud-width: 312px;
    --hud-radius: 12px;
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: var(--neon-black);
    color: var(--text-primary);
    font-family: "Cascadia Mono", "Consolas", "SFMono-Regular", "Menlo", monospace;
    overflow: hidden;
  }

  /* ── The grid ──────────────────────────────────────────────────────────── */

  #retroskin-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: crosshair;
    z-index: 1;
  }

  /* Static neon floor: real graphics even before the WebGL grid boots, and the
     guaranteed fallback if WebGL is unavailable (the canvas stays transparent,
     so this shows through). The floor is a rotated plane that recedes to a lit
     horizon, exactly like the WebGL scene, and it scrolls toward the viewer
     forever, so a still screen still lives. */
  #retroskin-grid-fallback {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-image:
      radial-gradient(120% 62% at 50% 104%, rgba(255, 0, 255, .20), transparent 62%),
      radial-gradient(90% 46% at 50% -8%, rgba(0, 255, 255, .12), transparent 60%);
    background-size: 100% 100%, 100% 100%;
    background-position: center, center;
  }

  /* The receding floor itself: a perspective grid plane, masked so it fades
     into the horizon seam instead of ending on a hard edge. */
  #retroskin-grid-fallback::before {
    content: "";
    position: absolute;
    left: -62%;
    right: -62%;
    bottom: -16%;
    height: 82%;
    background-image:
      linear-gradient(rgba(0, 255, 255, .34) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 255, 255, .30) 1px, transparent 1px);
    background-size: 72px 72px, 72px 72px;
    transform: perspective(300px) rotateX(75deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .25) 22%, #000 58%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .25) 22%, #000 58%, #000 100%);
    animation: retroskin-floor-scroll 2.4s linear infinite;
  }

  /* The horizon: a lit seam where the floor meets the dark. */
  #retroskin-grid-fallback::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 46%;
    height: 2px;
    background: linear-gradient(90deg,
      transparent, rgba(0, 255, 255, .60) 18%, rgba(255, 0, 255, .60) 82%, transparent);
    filter: blur(.4px);
    box-shadow: 0 0 26px rgba(0, 255, 255, .40);
  }

  /* The other scenes paint their own backdrop and never want the grid plane. */
  body.retroskin-scene-sunset #retroskin-grid-fallback::before,
  body.retroskin-scene-flight #retroskin-grid-fallback::before,
  body.retroskin-scene-rocket #retroskin-grid-fallback::before,
  body.retroskin-scene-tram #retroskin-grid-fallback::before { display: none; }

  @keyframes retroskin-floor-scroll {
    from { background-position: 0 0, 0 0; }
    to { background-position: 0 72px, 0 72px; }
  }

  /* Miami Sunset fallback: a seamless, endlessly scrolling synthwave sky,
     shown before (or without) WebGL when the Miami Sunset scene is selected. */
  body.retroskin-scene-sunset #retroskin-grid-fallback {
    background-image:
      linear-gradient(180deg, #140a2e 0%, #3d1470 30%, #b62f8f 56%, #ff7a3d 76%, #ffd166 84%),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 2px, transparent 2px 120px),
      repeating-linear-gradient(180deg, rgba(255, 0, 255, .30) 0 2px, transparent 2px 26px);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    background-position: center, 0 0, 0 0;
    animation: retroskin-sunset-scroll 14s linear infinite;
  }

  body.retroskin-scene-sunset #retroskin-grid-fallback::after {
    bottom: 44%;
    background: linear-gradient(90deg,
      transparent, rgba(255, 209, 102, .8) 22%, rgba(255, 122, 61, .8) 78%, transparent);
    box-shadow: 0 0 30px rgba(255, 122, 61, .45);
  }

  @keyframes retroskin-sunset-scroll {
    from { background-position: center, 0 0, 0 0; }
    to { background-position: center, -120px 0, 0 26px; }
  }

  /* Juneau Flight fallback: dusk out the window of a six-seat single — the sun
     setting on the LEFT, mountain ridges in lines, and the sea below. Shown
     before (or without) WebGL when the Juneau Flight scene is selected. */
  body.retroskin-scene-flight #retroskin-grid-fallback {
    background-image:
      /* the sun, low and to the left */
      radial-gradient(15% 27% at 17% 60%, rgba(255, 214, 132, .95), rgba(255, 122, 61, .30) 58%, rgba(255, 122, 61, 0) 78%),
      /* the near ridge, taller and faster */
      conic-gradient(from 150deg at 50% 100%, transparent 0deg 14deg, rgba(0, 255, 255, .50) 14deg 20deg, transparent 20deg 34deg, rgba(0, 255, 255, .50) 34deg 40deg, transparent 40deg 58deg, rgba(0, 255, 255, .50) 58deg 64deg, transparent 64deg),
      /* the far ridge, nearly violet */
      conic-gradient(from 158deg at 50% 100%, transparent 0deg 16deg, rgba(150, 90, 255, .55) 16deg 22deg, transparent 22deg 40deg, rgba(150, 90, 255, .55) 40deg 46deg, transparent 46deg 70deg, rgba(150, 90, 255, .55) 70deg 76deg, transparent 76deg),
      /* the sea (bottom 42%) */
      linear-gradient(180deg, #16375f 0%, #050d1c 100%),
      /* the dusk sky */
      linear-gradient(180deg, #160f38 0%, #3a1668 30%, #8e2a86 50%, #e0567a 60%, #ff9a4a 68%, #ffd166 74%);
    background-size: 100% 100%, 190px 42%, 130px 34%, 100% 42%, 100% 100%;
    background-position: center, left 0 bottom 42%, left 0 bottom 42%, center bottom, center;
    background-repeat: no-repeat, repeat-x, repeat-x, no-repeat, no-repeat;
    animation: retroskin-flight-pass 26s linear infinite;
  }

  body.retroskin-scene-flight #retroskin-grid-fallback::after {
    bottom: 42%;
    background: linear-gradient(90deg,
      transparent, rgba(255, 209, 102, .85) 22%, rgba(255, 122, 61, .70) 60%, transparent);
    box-shadow: 0 0 30px rgba(255, 122, 61, .45);
  }

  @keyframes retroskin-flight-pass {
    from {
      background-position: center, left 0 bottom 42%, left 0 bottom 42%, center bottom, center;
    }
    to {
      background-position: center, left -380px bottom 42%, left -260px bottom 42%, center bottom, center;
    }
  }

  /* Retro Rocket fallback: neon-blue space with an orange sun, a band of lunar
     hills and lit crater rims along the bottom. Shown before (or without)
     WebGL when the Retro Rocket scene is selected. */
  body.retroskin-scene-rocket #retroskin-grid-fallback {
    background-image:
      /* the sun, upper right */
      radial-gradient(11% 15% at 76% 22%, rgba(255, 214, 150, .95), rgba(255, 138, 61, .45) 45%, rgba(255, 138, 61, 0) 72%),
      /* the lit crater rims along the bottom */
      radial-gradient(38% 9% at 22% 96%, rgba(11, 27, 43, .95), rgba(255, 138, 61, .28) 62%, rgba(5, 7, 15, 0) 78%),
      radial-gradient(46% 12% at 74% 99%, rgba(11, 27, 43, .95), rgba(46, 196, 255, .30) 60%, rgba(5, 7, 15, 0) 80%),
      /* the rolling hills */
      conic-gradient(from 158deg at 50% 100%, transparent 0deg 12deg, rgba(46, 196, 255, .45) 12deg 17deg, transparent 17deg 32deg, rgba(46, 196, 255, .45) 32deg 37deg, transparent 37deg 60deg, rgba(46, 196, 255, .45) 60deg 65deg, transparent 65deg),
      /* space */
      linear-gradient(180deg, #05070f 0%, #071021 58%, #0b1b2b 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 190px 34%, 100% 100%;
    background-position: center, center, center, left 0 bottom 0, center;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, no-repeat;
    animation: retroskin-rocket-drift 44s linear infinite;
  }

  body.retroskin-scene-rocket #retroskin-grid-fallback::after {
    bottom: 30%;
    background: linear-gradient(90deg,
      transparent, rgba(46, 196, 255, .55) 35%, rgba(255, 138, 61, .55) 70%, transparent);
    box-shadow: 0 0 26px rgba(46, 196, 255, .35);
  }

  @keyframes retroskin-rocket-drift {
    from { background-position: center, center, center, left 0 bottom 0, center; }
    to { background-position: center, center, center, left -190px bottom 0, center; }
  }

  /* Yellow Mountain Tram fallback: the seat of a cable car climbing the Yellow
     Mountain — granite streaming past the glass, a pine line on the near ledge,
     a sea of clouds settling below, and a thick cabin frame (pillars, header,
     sill and a steel hand rail) around the opening. Shown before (or without)
     WebGL when the Yellow Mountain Tram scene is selected. */
  body.retroskin-scene-tram #retroskin-grid-fallback {
    background-image:
      /* the cabin wall and sill: you are looking over the sill */
      linear-gradient(180deg, rgba(8, 11, 24, 0) 0 72%, rgba(22, 16, 10, .80) 77%, #070a14 100%),
      /* the pine line riding the near ledge, passing the glass */
      repeating-conic-gradient(from -22deg at 50% 100%, rgba(4, 24, 19, .92) 0deg 7deg, transparent 7deg 17deg),
      /* the sea of clouds, lapping at the bases of the spires */
      repeating-linear-gradient(180deg, rgba(214, 232, 245, .50) 0 3px, rgba(214, 232, 245, .20) 3px 9px, rgba(214, 232, 245, .38) 9px 14px),
      /* the near buttress, fastest */
      conic-gradient(from 156deg at 50% 100%, transparent 0deg 18deg, rgba(0, 229, 255, .45) 18deg 23deg, transparent 23deg 44deg, rgba(0, 229, 255, .40) 44deg 49deg, transparent 49deg),
      /* the hero granite, taller */
      conic-gradient(from 162deg at 50% 100%, transparent 0deg 10deg, rgba(255, 180, 84, .50) 10deg 14deg, transparent 14deg 30deg, rgba(0, 229, 255, .55) 30deg 35deg, transparent 35deg 56deg, rgba(255, 180, 84, .45) 56deg 60deg, transparent 60deg),
      /* the far range, hazy violet */
      conic-gradient(from 168deg at 50% 100%, transparent 0deg 13deg, rgba(150, 120, 255, .45) 13deg 18deg, transparent 18deg 38deg, rgba(150, 120, 255, .45) 38deg 43deg, transparent 43deg 68deg, rgba(150, 120, 255, .45) 68deg 73deg, transparent 73deg),
      /* first light, low and to the left */
      radial-gradient(34% 30% at 24% 52%, rgba(255, 214, 140, .55), rgba(255, 180, 84, 0) 74%),
      /* the sky */
      linear-gradient(180deg, #0e102e 0%, #2c1f57 26%, #6a3a86 40%, #c2708a 47%, #ffb454 52%, #d8e6f2 58%);
    background-size: 100% 100%, 260px 32%, 100% 22%, 210px 40%, 170px 34%, 140px 30%, 100% 100%, 100% 100%;
    background-position: center, left 0 bottom 27%, center bottom 30%, left 0 bottom 30%, left 0 bottom 30%, left 0 bottom 30%, center, center;
    background-repeat: no-repeat, repeat-x, repeat, repeat-x, repeat-x, repeat-x, no-repeat, no-repeat;
    animation: retroskin-tram-climb 30s linear infinite;
    /* The cabin: thick pillars each side, a header above and a deep parapet
       below the sill, each with a lit inner bevel. */
    box-shadow:
      inset 0 0 0 9px #05070f,
      inset 0 0 0 11px rgba(168, 230, 255, .28),
      inset 52px 0 0 -9px #0a0e18,
      inset -52px 0 0 -9px #0a0e18,
      inset 0 30px 0 -9px #0a0e18,
      inset 0 -70px 0 -9px #0a0e18,
      inset 0 -72px 0 -9px rgba(168, 230, 255, .20);
  }

  body.retroskin-scene-tram #retroskin-grid-fallback::after {
    bottom: 30%;
    height: 4px;
    background: linear-gradient(180deg, rgba(233, 249, 255, .78), rgba(120, 140, 160, .35));
    box-shadow: 0 0 22px rgba(168, 230, 255, .35);
  }

  @keyframes retroskin-tram-climb {
    from {
      background-position: center, left 0 bottom 27%, center bottom 30%, left 0 bottom 30%, left 0 bottom 30%, left 0 bottom 30%, center, center;
    }
    to {
      background-position: center, left -260px bottom 27%, center bottom 22%, left -300px bottom 30%, left -210px bottom 30%, left -150px bottom 30%, center, center;
    }
  }

  /* Plain Glow: the grid is OFF for this backdrop, so the guaranteed fallback
     is the skin's own palette as a soft two-tone glow — no grid lines and no
     horizon seam. It still animates (slowly) so a still frame still lives. */
  body.retroskin-scene-plain #retroskin-grid-fallback {
    background-image:
      radial-gradient(88% 60% at 50% 104%, var(--neon-cyan, #00FFFF), transparent 70%),
      radial-gradient(70% 52% at 50% -6%, var(--neon-magenta, #FF00FF), transparent 72%),
      linear-gradient(180deg, var(--panel-black, #141414), var(--neon-black, #0A0A0A));
    background-size: 100% 100%, 100% 100%, 100% 100%;
    background-position: center, center, center;
    background-blend-mode: soft-light, soft-light, normal;
    animation: retroskin-plain-breathe 18s ease-in-out infinite;
  }

  body.retroskin-scene-plain #retroskin-grid-fallback::before,
  body.retroskin-scene-plain #retroskin-grid-fallback::after { display: none; }

  @keyframes retroskin-plain-breathe {
    from { filter: brightness(.92) saturate(.92); }
    50% { filter: brightness(1.06) saturate(1.08); }
    to { filter: brightness(.92) saturate(.92); }
  }

  /* Respect reduced-motion: the fallbacks stay, but nothing scrolls. */
  @media (prefers-reduced-motion: reduce) {
    #retroskin-grid-fallback,
    #retroskin-grid-fallback::before,
    body.retroskin-scene-sunset #retroskin-grid-fallback,
    body.retroskin-scene-flight #retroskin-grid-fallback,
    body.retroskin-scene-rocket #retroskin-grid-fallback,
    body.retroskin-scene-plain #retroskin-grid-fallback,
    body.retroskin-scene-tram #retroskin-grid-fallback { animation: none; }
  }

  /* ── The settings menu (HUD) ───────────────────────────────────────────── */

  #hud {
    position: fixed;
    top: 16px;
    left: 16px;
    width: var(--hud-width);
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
    overflow: hidden;
    padding: 0 0 14px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 42%),
      color-mix(in srgb, var(--panel-black) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--neon-cyan) 52%, transparent);
    border-radius: var(--hud-radius);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--neon-cyan) 12%, transparent),
      0 0 30px color-mix(in srgb, var(--neon-cyan) 22%, transparent),
      0 18px 48px rgba(0, 0, 0, .6);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .02em;
    z-index: 10;
    transition: width .18s ease, box-shadow .18s ease;
  }

  /* Accent bar across the top of the menu. */
  #hud::before {
    content: "";
    display: block;
    height: 3px;
    margin: -1px -1px 0;
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta) 72%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--neon-cyan) 45%, transparent);
  }

  body.hud-hidden #hud { display: none; }

  #hud .hud-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 12px 4px 14px;
  }

  #hud .hud-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  #hud .hud-mark {
    color: var(--neon-magenta);
    text-shadow: 0 0 10px color-mix(in srgb, var(--neon-magenta) 70%, transparent);
    animation: hud-pulse 3.2s ease-in-out infinite;
  }

  @keyframes hud-pulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
  }

  #hud h1 {
    margin: 0;
    font-size: 12.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--neon-cyan);
    text-shadow: 0 0 12px color-mix(in srgb, var(--neon-cyan) 60%, transparent);
  }

  #hud .hud-body {
    padding: 0 14px;
    max-height: calc(100vh - 118px);
    overflow-y: auto;
  }

  #hud .meta {
    margin: 2px 0 12px;
    color: var(--text-dim);
    font-size: 10.5px;
    overflow-wrap: anywhere;
  }

  #hud .meta strong { color: var(--text-primary); font-weight: 500; }

  /* Collapsed: the menu keeps its title and the live setting summary. */
  #hud .hud-summary {
    display: none;
    margin: 2px 14px 2px;
    font-size: 10.5px;
    letter-spacing: .1em;
    color: var(--neon-cyan);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #hud[data-collapsed="true"] {
    width: auto;
    min-width: 232px;
    max-width: min(320px, calc(100vw - 32px));
  }

  #hud[data-collapsed="true"] .hud-body { display: none; }
  #hud[data-collapsed="true"] .hud-summary { display: block; }
  #hud[data-collapsed="true"] .hud-head { padding-bottom: 8px; }

  #hud fieldset {
    margin: 0 0 10px;
    padding: 8px 10px 10px;
    border: 1px solid color-mix(in srgb, var(--neon-cyan) 28%, transparent);
    border-radius: 8px;
    background: rgba(0, 0, 0, .28);
  }

  #hud legend {
    padding: 0 6px;
    color: var(--text-dim);
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
  }

  #hud label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 5px 0;
    color: var(--text-primary);
  }

  #hud select {
    flex: 0 0 136px;
    padding: 4px 24px 4px 8px;
    background-color: var(--neon-black);
    background-image:
      linear-gradient(45deg, transparent 50%, var(--neon-cyan) 50%),
      linear-gradient(135deg, var(--neon-cyan) 50%, transparent 50%);
    background-position: calc(100% - 13px) 52%, calc(100% - 8px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    color: var(--neon-cyan);
    border: 1px solid color-mix(in srgb, var(--neon-cyan) 42%, transparent);
    border-radius: 6px;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
  }

  #hud select:hover {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 10px color-mix(in srgb, var(--neon-cyan) 30%, transparent);
  }

  #hud select:focus-visible {
    outline: none;
    border-color: var(--neon-magenta);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--neon-magenta) 30%, transparent);
  }

  #hud .buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
  }

  #hud button {
    position: relative;
    overflow: hidden;
    padding: 5px 10px;
    background: rgba(0, 0, 0, .35);
    color: var(--neon-cyan);
    border: 1px solid color-mix(in srgb, var(--neon-cyan) 50%, transparent);
    border-radius: 6px;
    font: inherit;
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
  }

  #hud button::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 20%,
      color-mix(in srgb, var(--neon-cyan) 26%, transparent), transparent 80%);
    transform: translateX(-110%);
    transition: transform .35s ease;
  }

  #hud button:hover {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 12px color-mix(in srgb, var(--neon-cyan) 38%, transparent);
  }

  #hud button:hover::after { transform: translateX(110%); }

  #hud button:focus-visible {
    outline: none;
    border-color: var(--neon-magenta);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--neon-magenta) 34%, transparent);
  }

  #hud #btn-guide {
    color: var(--neon-magenta);
    border-color: color-mix(in srgb, var(--neon-magenta) 55%, transparent);
  }

  #hud #btn-guide:hover {
    border-color: var(--neon-magenta);
    box-shadow: 0 0 12px color-mix(in srgb, var(--neon-magenta) 40%, transparent);
  }

  #hud #btn-guide::after {
    background: linear-gradient(120deg, transparent 20%,
      color-mix(in srgb, var(--neon-magenta) 28%, transparent), transparent 80%);
  }

  /* The minimize control lives in the title row, so it is reachable while
     collapsed — which is the whole point of collapsing. */
  #hud #btn-minimize {
    flex: 0 0 auto;
    width: 26px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    border-radius: 6px;
    background: color-mix(in srgb, var(--neon-cyan) 8%, transparent);
    border-color: color-mix(in srgb, var(--neon-cyan) 34%, transparent);
  }

  #hud #btn-minimize .chev {
    display: inline-block;
    transition: transform .18s ease;
    color: var(--neon-cyan);
  }

  #hud[data-collapsed="true"] #btn-minimize .chev { transform: rotate(-90deg); }

  #hud .hint {
    margin: 6px 0 0;
    color: var(--text-dim);
    font-size: 10.5px;
    line-height: 1.7;
  }

  #hud .hint kbd {
    padding: 0 4px;
    border: 1px solid color-mix(in srgb, var(--neon-cyan) 38%, transparent);
    border-radius: 4px;
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--neon-cyan) 18%, transparent);
    color: var(--text-primary);
  }

  #btn-show {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 11;
    display: none;
    padding: 6px 11px;
    background: color-mix(in srgb, var(--panel-black) 90%, transparent);
    color: var(--neon-cyan);
    border: 1px solid var(--neon-cyan);
    border-radius: 999px;
    font: inherit;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 16px color-mix(in srgb, var(--neon-cyan) 26%, transparent);
  }

  body.hud-hidden #btn-show { display: block; }

  #status {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px 12px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), color-mix(in srgb, var(--neon-black) 82%, transparent));
    color: var(--text-dim);
    border-top: 1px solid color-mix(in srgb, var(--neon-cyan) 22%, transparent);
    font-size: 11px;
    z-index: 10;
  }

  body.hud-hidden #status { opacity: .35; }

  #status[data-kind="ok"] { color: var(--neon-cyan); }
  #status[data-kind="error"] { color: #ff6b6b; }

  body.retroskin-failed #hud { border-color: #ff6b6b; }

  @media (max-width: 560px) {
    #hud {
      left: 10px;
      right: 10px;
      top: 10px;
      width: auto;
      max-width: none;
    }
    #hud .hud-title h1 { font-size: 11.5px; letter-spacing: .14em; }
  }