/* «عدّاد التاكسي»: the board. A city map at night: roads with their kilometres, cameras, a closed road, the
   suspects' places, and the taxi's route drawn in sun yellow as the player taps the roads. */
:root { --accent: #3DDC97; --road: #3F5A85; --roadHit: rgba(255, 255, 255, 0); }

.hud { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; font-weight: 700; color: var(--soft); margin: 0 0 8px; font-size: .95rem; }
.hud b { color: var(--sun); font-size: 1.15rem; font-family: var(--display); }
.hud #hudAt { margin-inline-start: auto; color: var(--ink); }

.mapWrap { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: 8px; overflow: hidden;
  background-image: linear-gradient(rgba(159, 183, 217, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(159, 183, 217, .06) 1px, transparent 1px); background-size: 20px 20px; }
#map { display: block; width: 100%; height: auto; max-width: 100%; touch-action: manipulation; font-family: var(--body); }
#map .road line.base { stroke: var(--road); stroke-width: 9; stroke-linecap: round; }
#map .road.closed line.base { stroke-dasharray: 6 7; stroke: #6B4A4A; }
#map .road line.hit { stroke: var(--roadHit); stroke-width: 26; stroke-linecap: round; cursor: pointer; }
#map .road.on line.base { stroke: var(--sun); stroke-width: 11; filter: drop-shadow(0 0 5px rgba(255, 210, 63, .7)); }
#map .road.next line.base { stroke: #5E7FB3; }
#map .road.last line.base { stroke: #FFE58A; }
#map .km rect { fill: var(--panel); stroke: var(--line); }
#map .km text { fill: var(--ink); font-size: 11px; font-weight: 800; text-anchor: middle; }
#map .road.on .km rect { fill: var(--sun); stroke: var(--sunD); }
#map .road.on .km text { fill: var(--sunInk); }
#map .cam { color: var(--soft); }
#map .cam .lens { fill: var(--bg2); }
#map .cam.none { color: var(--bad); }
#map .cam.seen { color: var(--ok); }
#map .camMark { font-size: 11px; font-weight: 800; text-anchor: middle; }
#map .cam.none + .camMark { fill: var(--bad); }
#map .cam.seen + .camMark { fill: var(--ok); }
#map .block { color: #FF9F7A; }
#map .node circle.dot { fill: var(--panel2); stroke: var(--line); stroke-width: 2; }
#map .node.start circle.dot { fill: var(--sun); stroke: var(--sunD); }
#map .node.hide circle.dot { fill: var(--panel); stroke-width: 3; }
#map .node.seen circle.dot { stroke: var(--sun); }
#map .node.end circle.dot { filter: drop-shadow(0 0 6px rgba(255, 210, 63, .8)); }
#map .node .house { color: var(--ink); }
#map .node text.name { fill: var(--ink); font-size: 11px; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: rgba(10, 20, 36, .8); stroke-width: 3px; }
#map .node.start text.name { fill: var(--sun); }
#map .taxi { color: var(--sun); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); pointer-events: none; }
#map .taxi .lens { fill: #0F1C2E; }

.ctl { display: flex; gap: 8px; margin-top: 8px; }
.ev .ico.none { color: var(--bad); }
.ev .ico.seen { color: var(--ok); }
.ev .ico.closed { color: #FF9F7A; }
.ev .ico svg .lens { fill: var(--panel2); }
.who i.sw { border: 2px solid #fff; }