/* Removal mode: tint the ENTIRE square, not just a subtle border. */
.cell.road.road-section-removable{
  outline:5px solid #ffd600 !important;
  outline-offset:-5px !important;
  box-shadow:
    inset 0 0 0 100px rgba(255,214,0,.42),
    inset 0 0 0 5px #fff200,
    0 0 0 2px rgba(0,0,0,.95) !important;
  filter:brightness(1.28) saturate(1.55) !important;
}
.cell.road.road-section-protected{
  outline:6px solid #ff1744 !important;
  outline-offset:-6px !important;
  box-shadow:
    inset 0 0 0 100px rgba(255,23,68,.52),
    inset 0 0 0 6px #ff1744,
    0 0 0 2px rgba(0,0,0,.98) !important;
  filter:brightness(1.12) saturate(1.6) !important;
}
.cell.road.road-section-hover{
  outline:6px solid #00e676 !important;
  outline-offset:-6px !important;
  box-shadow:
    inset 0 0 0 100px rgba(0,230,118,.58),
    inset 0 0 0 6px #00e676,
    0 0 0 3px rgba(0,0,0,.98) !important;
  filter:brightness(1.42) saturate(1.75) !important;
  z-index:30 !important;
}
.cell.road.road-section-hover-blocked{
  outline:6px solid #ff1744 !important;
  outline-offset:-6px !important;
  box-shadow:
    inset 0 0 0 100px rgba(255,23,68,.64),
    inset 0 0 0 6px #ff1744,
    0 0 0 3px rgba(0,0,0,.98) !important;
  filter:brightness(1.12) saturate(1.75) !important;
  z-index:30 !important;
}
/* Keep road markings legible over the tint. */
.cell.road.road-section-removable svg.road-marking,
.cell.road.road-section-protected svg.road-marking,
.cell.road.road-section-hover svg.road-marking,
.cell.road.road-section-hover-blocked svg.road-marking{
  position:relative;
  z-index:4 !important;
  opacity:1 !important;
}