/* Reset, page shell and the canvas itself. */

:root{
    --bg:#05080f;
    --panel:rgba(13,21,39,.66);
    --panel2:rgba(9,15,29,.9);
    --edge:rgba(122,163,255,.20);
    --edge2:rgba(122,163,255,.38);
    --ink:#e9f0ff;
    --dim:#7688ad;
    --neon:#ffe25c;
    --cy:#5ce9ff;
    --red:#ff5a72;
    --grn:#5cffa5;
    --vio:#c08cff;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
    font-family:'Saira Condensed',system-ui,sans-serif;user-select:none;-webkit-user-select:none;
    -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
    overscroll-behavior:none;touch-action:none}
  button,input{touch-action:manipulation}
  canvas#cv{display:block;position:fixed;inset:0;cursor:none;touch-action:none;z-index:1}
  /* The sky. A flat vertical gradient that only changes when the map does, so
     the page paints it once instead of the render loop filling it every frame.
     buildBG() writes the colours in. */
  .sky{position:fixed;inset:0;z-index:0;background:#05080f}
  .mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* Vignette. Static, so it belongs to the page rather than to the render loop —
   as a per-frame canvas fill it cost a full-screen gradient sixty times a
   second to draw something that never changed. */
.vig{position:fixed;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(0,0,0,0) 42%, rgba(0,0,0,.30) 72%, rgba(0,0,0,.55) 100%)}