#stage { background: #70786f; }
#world { z-index: 0; }
.ground {
  position: absolute;
  left: -10000px;
  top: -10000px;
  width: 20000px;
  height: 20000px;
  background-color: #70786f;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 48px 48px;
}
#map-image { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; }
#car object {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  border: 0;
  background: transparent !important;
}
#car { background: transparent !important; }
#car-svg, #car-svg svg { display: block; width: 100%; height: 100%; overflow: visible; border: 0; background: transparent !important; }
#guides { top: 50%; transform-origin: 50% 0; }
#guides .guide-edge { fill: none; stroke: #83fa55; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 7; }
#guides .distance { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: none; }
#guides .distance.green { stroke: #72f457; }
#guides .distance.yellow { stroke: #ffd337; }
#guides .distance.red { stroke: #ff3e37; }
#notice { position: absolute; z-index: 20; top: 130px; left: 50%; translate: -50% 0; padding: 9px 14px; border: 1px solid #ffcf68; border-radius: 9px; color: #201704; background: #ffd77f; box-shadow: 0 7px 25px rgba(0,0,0,.3); font-size: 12px; opacity: 0; pointer-events: none; transition: opacity .15s; }
#notice.show { opacity: 1; }
.brake.attention { border-color: #ffcf68; box-shadow: 0 0 20px #ffc64d; }
#zoom-label { min-width: 58px; color: #dfe5e7; opacity: 1; cursor: default; }
