/* Square location artwork remains visible above and below the two lanes. */
.race-track {
  height: clamp(290px, 48vw, 380px);
  border: 4px solid #39434b;
  border-radius: 5px;
  background-color: #242a30;
  background-image: linear-gradient(90deg,#0003,transparent 12%,transparent 88%,#0003),var(--track-art);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 24px #0004;
}
.race-track.track-city { --track-art:url('/tracks/city.png?v=1'); border-color:#354459; }
.race-track.track-highway { --track-art:url('/tracks/highway.png?v=1'); border-color:#536351; }
.race-track.track-mountain { --track-art:url('/tracks/mountain.png?v=1'); border-color:#68717b; }
.race-track.track-port { --track-art:url('/tracks/port.png?v=1'); border-color:#3d596d; }
.race-track.track-circuit { --track-art:url('/tracks/circuit.png?v=1'); border-color:#73333a; }
.race-track.track-forest { --track-art:url('/tracks/forest.png?v=1'); border-color:#355346; }
.race-track[class*="track-"] {
  background-image: linear-gradient(90deg,#0003,transparent 12%,transparent 88%,#0003),var(--track-art);
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
}
.race-track .track-edge { height:3px; opacity:.9; background:rgba(230,235,232,.8); }
.race-track .track-edge.top { top:26%; }
.race-track .track-edge.bottom { bottom:26%; }
.race-track .track-divider { height:3px; top:calc(50% - 1px); opacity:.8; background:repeating-linear-gradient(90deg,#f4f4f4 0 22px,transparent 22px 44px); }
.race-track .track-line { top:27%; bottom:27%; width:5px; z-index:1; }
.race-track .race-car.car-player { top:38%; }
.race-track .race-car.car-opponent { top:62%; }
.race-track.track-city .track-edge { background:#dd4e61; box-shadow:0 0 8px #d03c58; }
.race-track.track-highway .track-edge { background:#c8d2c6; }
.race-track.track-mountain .track-edge { background:repeating-linear-gradient(110deg,#d7dedc 0 15px,#9c3940 15px 30px); }
.race-track.track-port .track-edge { background:repeating-linear-gradient(110deg,#d9dfd9 0 16px,#bd4149 16px 32px); }
.race-track.track-circuit .track-edge { height:5px; background:repeating-linear-gradient(90deg,#f1efea 0 18px,#c33743 18px 36px); }
.race-track.track-forest .track-edge { background:#899c8b; }
@media(max-width:520px) { .race-track { height:clamp(265px,75vw,320px); border-width:3px; } }