/* FRAG WATCH / PROSETTINGS-STYLE CS2 MAP CAROUSEL
   The map image is the backdrop; each pro's decoded settings produce
   a separate SVG overlay centered above it. */
.ch-page .ch-cross-stage.ch-map-stage{
  position:relative;
  isolation:isolate;
  display:block;
  box-sizing:border-box;
  width:100%;
  height:auto;
  min-height:91px;
  max-height:none;
  aspect-ratio:1120 / 350;
  padding:0;
  margin:12px 0 14px;
  overflow:hidden;
  border:1px solid #4e5057;
  border-radius:11px;
  background:#5f676c url("/crosshair/concrete-wall.svg") center / cover no-repeat;
  box-shadow:0 0 0 1px rgba(0,0,0,.11);
}
.ch-page .ch-cross-stage.ch-map-stage::before,
.ch-page .ch-cross-stage.ch-map-stage::after{
  content:none;
  display:none;
}
.ch-page .ch-map-stage .ch-map-image{
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:brightness(.88);
  display:block;
  border:0;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.ch-page .ch-map-stage .ch-map-image[hidden]{display:none}
.ch-page .ch-map-stage .ch-cross-svg{
  display:block;
  position:absolute;
  z-index:6;
  top:50%;
  left:50%;
  width:56px;
  height:56px;
  transform:translate(-50%,-50%);
  overflow:visible;
  pointer-events:none;
  user-select:none;
  flex-shrink:0;
  /* Keep the actual crosshair small and crisp; the map is dimmed instead. */
  filter:none;
}
.ch-page .ch-map-stage .ch-map-arrow{
  position:absolute;
  z-index:8;
  top:50%;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0 0 2px;
  transform:translateY(-50%);
  border:2px solid #ff8753;
  border-radius:50%;
  background:rgba(19,23,27,.33);
  color:#ff9564;
  font-size:24px;
  font-weight:700;
  font-family:inherit;
  line-height:1;
  text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .16s ease,color .16s ease;
}
.ch-page .ch-map-stage .ch-map-prev{left:9px}
.ch-page .ch-map-stage .ch-map-next{right:9px}
.ch-page .ch-map-stage .ch-map-arrow:hover,
.ch-page .ch-map-stage .ch-map-arrow:focus-visible{
  background:#ff8753;
  color:#14191d;
}
.ch-page .ch-map-stage .ch-map-arrow:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}
.ch-page .ch-map-stage .ch-map-name{
  position:absolute;
  z-index:7;
  right:7px;
  bottom:6px;
  padding:3px 6px;
  border-radius:4px;
  background:rgba(15,19,23,.53);
  color:#f3f5f7;
  font-size:8px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.6px;
  text-shadow:0 1px 2px #0009;
  pointer-events:none;
}
.ch-page .ch-map-stage.is-empty .ch-no-code{
  position:absolute;
  z-index:7;
  top:50%;
  left:50%;
  bottom:auto;
  width:auto;
  max-width:70%;
  transform:translate(-50%,-50%);
  padding:5px 8px;
  background:rgba(14,19,24,.82);
  border-radius:5px;
  color:#f3f3f3;
  text-align:center;
  font-size:10px;
  font-weight:900;
  letter-spacing:.2px;
  white-space:nowrap;
}
html[data-fw-theme="day"] .ch-page .ch-cross-stage.ch-map-stage{
  border-color:#96989c;
  background:#5f676c url("/crosshair/concrete-wall.svg") center / cover no-repeat;
}
@media(max-width:739px){
  .ch-page .ch-cross-stage.ch-map-stage{
    width:100%;
    min-height:81px;
    margin:10px 0 12px;
  }
  .ch-page .ch-map-stage .ch-map-arrow{width:28px;height:28px;font-size:20px}
  .ch-page .ch-map-stage .ch-map-prev{left:5px}
  .ch-page .ch-map-stage .ch-map-next{right:5px}
  .ch-page .ch-map-stage .ch-map-name{font-size:7px;bottom:4px;right:5px}
}
@media(max-width:480px){
  .ch-page .ch-cross-stage.ch-map-stage{min-height:96px;margin:12px 0 14px}
  .ch-page .ch-map-stage .ch-map-arrow{width:32px;height:32px;font-size:23px}
  .ch-page .ch-map-stage .ch-map-prev{left:8px}
  .ch-page .ch-map-stage .ch-map-next{right:8px}
}
@media(prefers-reduced-motion:reduce){
  .ch-page .ch-map-stage .ch-map-arrow{transition:none}
}