@media (max-width:850px){
  html,body{overflow-x:hidden}

  .map-side{
    height:auto!important;
    min-height:0!important;
    padding:14px 14px 18px!important;
    overflow:visible!important;
  }

  .crumb-row{margin-bottom:2px}

  .map-wrap{
    width:100%!important;
    height:clamp(540px,72svh,680px)!important;
    min-height:540px!important;
    max-height:none!important;
    overflow:hidden!important;
    align-items:center!important;
    justify-content:center!important;
  }

  #mapSvg{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .legend{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    margin:8px auto 0!important;
    width:max-content!important;
    max-width:100%!important;
    z-index:8!important;
  }

  .chance-test-badge{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    margin:8px auto 0!important;
    width:max-content!important;
    max-width:100%!important;
    text-align:center!important;
  }

  .info-side{
    min-height:0!important;
    height:auto!important;
  }
}

@media (max-width:430px){
  .map-wrap{
    height:clamp(560px,76svh,660px)!important;
    min-height:560px!important;
  }

  .legend{
    gap:3px!important;
    padding:8px 9px!important;
    font-size:9px!important;
  }

  .legend b{font-size:9px!important}
  .legend span{width:17px!important}
}