/* The same parchment surrounds the editor preview and interactive player map. */
.detail-map,
.map-surface {
  border: 22px solid transparent;
  border-image: url("/images/map-parchment.svg") 12 fill / 22px / 0 stretch;
  background: #ddc79f;
  box-shadow: 4px 6px 0 #0005;
}
.detail-map {
  margin-top: 12px;
}
.detail-map img,
.map-surface .leaflet-image-layer {
  image-rendering: pixelated;
}
.map-surface {
  border-width: 14px;
  border-image-width: 14px;
  height: 290px;
}
.map-surface .leaflet-container {
  background: #ddc79f;
  outline: 1px solid #9d815c;
}
.map-surface .leaflet-bar {
  border: 2px solid #806543;
  border-radius: 0;
  box-shadow: 2px 2px 0 #0004;
}
.map-surface .leaflet-bar a {
  background: #e5c99a;
  color: #493a28;
  border-color: #b39970;
  border-radius: 0;
}
.map-surface .leaflet-bar a:hover,
.map-surface .leaflet-bar a:focus-visible {
  background: #f3ddb1;
}
.map-surface .leaflet-bar a.leaflet-disabled {
  background: #c9b18a;
  color: #847256;
}
.pin-marker {
  background: #e45e66;
  border-color: #fff1d0;
  border-radius: 50%;
  transform: none;
  box-shadow:
    0 0 0 1px #763d36,
    1px 2px 0 #0005;
}
.actual-marker {
  background: #90c55b;
  box-shadow:
    0 0 0 1px #426132,
    1px 2px 0 #0005;
}
.game-map {
  width: 340px;
  border: 2px solid #806543;
  background: #241e18;
}
.game-map.expanded {
  width: min(650px, calc(100vw - 48px));
}
.map-topline,
.map-topline button,
.map-actions small {
  color: #e5c99a;
}
.map-topline {
  padding: 9px 12px;
}
.map-actions {
  padding: 12px;
}
.map-actions .button.primary {
  background: #715034;
  color: #fff1d0;
  border-color: #af8956;
  box-shadow:
    inset 3px 3px 0 #a67c4e,
    inset -3px -3px 0 #49331f,
    2px 2px 0 #0005;
}
.map-actions .button.primary:hover:not(:disabled) {
  background: #87613e;
}
.expanded .map-surface {
  height: min(540px, 58vh);
  border-width: 22px;
  border-image-width: 22px;
}
.result-map {
  border: 0;
}
@media (max-width: 600px) {
  .detail-map {
    border-width: 16px;
    border-image-width: 16px;
  }
  .game-map {
    width: 250px;
  }
  .game-map .map-surface {
    height: 210px;
    border-width: 12px;
    border-image-width: 12px;
  }
  .game-map.expanded {
    width: calc(100vw - 28px);
  }
  .game-map.expanded .map-surface {
    height: min(440px, 50vh);
    border-width: 16px;
    border-image-width: 16px;
  }
}