:root { color-scheme: dark; }
  html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
  body { font: 11px/1.4 "Courier New", Courier, monospace; color: #9a9a9a; user-select: none; -webkit-user-select: none; }

  #bg, #trails { position: fixed; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
  #flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
  #stage { position: fixed; inset: 0; overflow: hidden; }
  #stage img {
    position: absolute; left: 0; top: 0;
    image-rendering: pixelated; image-rendering: crisp-edges;
    will-change: transform, opacity;
    pointer-events: none;
    opacity: 0;
  }

  .hud {
    position: fixed; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 10px; z-index: 100;
    opacity: .55; transition: opacity .2s;
  }
  #hud { right: 12px; }
  #hudl { left: 12px; }
  .hud:hover { opacity: 1; }

  #spk, #info {
    width: 34px; height: 34px; padding: 0; margin: 0; cursor: pointer; box-sizing: border-box;
    background: #c0c0c0; border: 2px outset #e8e8e8; color: #000;
    display: grid; place-items: center;
  }
  #spk:active, #info:active { border-style: inset; }
  #spk svg, #info svg { width: 20px; height: 20px; display: block; }
  #info:focus-visible { outline: 2px dotted #fff; outline-offset: 2px; }
  #spk .on { display: none; }
  body.music-on #spk .on { display: block; }
  body.music-on #spk .off { display: none; }
  #spk:focus-visible { outline: 2px dotted #fff; outline-offset: 2px; }

  /* start gate: nothing runs until this is clicked */
  #gate {
    position: fixed; inset: 0; z-index: 200; margin: 0; padding: 0; border: 0;
    background: #000; color: #c0c0c0; cursor: pointer;
    display: grid; place-content: center; justify-items: center; gap: 18px;
    font: inherit;
  }
  #gate img { width: 180px; height: 180px; image-rendering: pixelated; animation: throb 0.9375s ease-in-out infinite; }
  #gate .label { font: bold 22px/1 "Times New Roman", Times, serif; color: #fff; letter-spacing: 1px; }
  #gate:focus-visible { outline: none; }
  #gate:focus-visible .label { text-decoration: underline; }
  @keyframes throb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
  @media (prefers-reduced-motion: reduce) { #gate img { animation: none; } }
  .hud { display: none; }
  body.started .hud { display: flex; }