/* Debug UI elements. Hit ` or D on the keyboard to enable debug mode, and some boxes & circles will be drawn
 * 
 */

body.debug {

  .players .ruler {
    border: 1px dashed white;
    position: absolute;
    left: calc(var(--x) * 1px);
    top: calc(var(--y) * 1px);
    height: 1px;
    transform-origin: left;
  }

  .players .car-body {
    .livery {
      /*filter: url(#displacementFilter);*/
    }

    /* collision circle */
    &::before {
      content: '';
      width: 160px;
      position: absolute;
      aspect-ratio: 1;
      border-radius: 100%;
      z-index: 1;
      left: 50%;
      top: 50%;
      translate: -50% -50%;
      border: 2px dashed white;
      opacity: .33;
    }

    /* velocity shown as: displaySpeed (actual velocity / maxSpeedForward) */
    &::after {
      content: attr(data-velocity);
      rotate: calc(var(--angle) * -1);
      position: fixed;
      left: 50px;
      top: 0;
      background: #00000066;
      padding: 1ex 1em;
      border-radius: .5ex;
      color: white;
    }

    .horn {
      visibility: visible;
      rotate: calc(var(--angle) * -1);
    }
  }

  .emitter-object {
    --color: white;
    
    box-shadow: inset 0 0 0 2px var(--color);
    &.hit {
      --color: var(--gelbe);
      background-color: var(--color);
    }
  }

  .waypointer > span {
    box-shadow: inset 0 0 0 1px white;
  }
}



@-moz-document url-prefix() {
  .layer.lights {
    mix-blend-mode: multiply;
    opacity: 0;
    animation: flashing calc(var(--day-duration) * 600s) cubic-bezier(0.75, 0, 0.7, 1) infinite forwards;
    img[data-layer="lights"] {
        display: block;
    }
  }
}