html, body { height: 100%; margin: 0; overflow: hidden; background: #060e1e; }
  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #dfe9ff;
    -webkit-user-select: none; user-select: none;
    cursor: default;
  }
  #scene {
    position: fixed; inset: 0; width: 100%; height: 100%; display: block;
    touch-action: none;
  }

  .vignette {
    position: fixed; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,0) 42%, rgba(2,5,12,.6) 100%);
  }

  /* HUD corner brackets */
  .corner { position: fixed; width: 26px; height: 26px; border: 1px solid rgba(190,215,255,.28); pointer-events: none; }
  .tl { top: 20px; left: 20px;   border-right: none; border-bottom: none; }
  .tr { top: 20px; right: 20px;  border-left: none;  border-bottom: none; }
  .bl { bottom: 20px; left: 20px; border-right: none; border-top: none; }
  .br { bottom: 20px; right: 20px; border-left: none; border-top: none; }

  .ui {
    position: fixed; left: 50%; bottom: 6%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 13px;
    text-align: center; pointer-events: none;
    width: max-content;
  }
  .barwrap { display: flex; align-items: center; gap: 12px; }
  .bar {
    width: min(320px, 58vw); height: 1px;
    background: rgba(150,180,230,.18);
    position: relative;
  }
  .fill {
    position: absolute; left: 0; top: -0.5px; height: 2px; width: 0%;
    background: linear-gradient(90deg, rgba(120,170,255,.1), #cfe4ff);
    box-shadow: 0 0 10px rgba(150,195,255,.8);
  }
  .pct {
    font-size: 11px; font-weight: 300; letter-spacing: .18em;
    color: #b9d0f5; font-variant-numeric: tabular-nums;
    width: 42px; text-align: left;
  }
  .status {
    font-size: 9px; font-weight: 300;
    letter-spacing: .38em; text-indent: .38em;
    color: rgba(148,180,232,.8);
    height: 12px;
    transition: opacity .25s ease;
  }