/* Enlarged touch targets are drawn only for the active small answer. */
.target-hit-area {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
  touch-action: none;
}

.country.target-hover {
  fill: #a4dad1;
  stroke: #0d687e;
  stroke-width: 1.5;
}

.country.completed-answer { pointer-events: none; }

.canary-inset rect {
  fill: #f7f4eb;
  fill-opacity: .96;
  stroke: #57939c;
  stroke-width: 1.2;
}

.game-map-stage > .canary-overlay {
  position: absolute;
  left: 25px;
  bottom: 22px;
  z-index: 4;
  width: 214px;
  height: 84px;
}

.game-map-stage .map-hint { top: 24px; bottom: auto; }

.game-map-stage > .us-insets-overlay {
  position: absolute;
  left: 25px;
  bottom: 22px;
  z-index: 4;
  width: 240px;
  height: 115px;
}

.us-inset-frame {
  fill: #f7f4eb;
  fill-opacity: .96;
  stroke: #57939c;
  stroke-width: 1.2;
}

.canary-inset text {
  fill: #477985;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 1px;
  pointer-events: none;
}

.province-boundary {
  fill: none;
  stroke: #5d929b;
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.province-boundary-top { opacity: .8; }