/* Compact mobile layout: crop the upper background while retaining the controls. */
@media (max-width: 680px) {
  .wxn-voices-mobile-v1__selector > svg {
    display: none;
  }

  .wxn-voices-mobile-v1 {
    min-height: 762px;
    padding-top: 38px;
    padding-bottom: 22px;
    background-position: center -68px;
  }

  .wxn-voices-mobile-v1__card {
    /* Explicitly overrides the original card spacing rule. */
    margin: 62px auto 0 !important;
  }

  .wxn-voices-mobile-v1__selector {
    min-height: 108px;
    margin-top: -2px;
  }

  .wxn-voices-mobile-v1__selector > svg {
    height: 58px;
  }

  .wxn-voices-mobile-v1__selector path {
    stroke-width: 1.35;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: .9;
  }

  .wxn-voices-mobile-v1.is-ready .wxn-voices-mobile-v1__selector path {
    animation: wxnVoicePodiumArc 1.05s .7s cubic-bezier(.22, 1, .36, 1) forwards;
  }

  .wxn-voices-mobile-v1__selector button span {
    width: 34px;
    height: 34px;
    margin-bottom: 6px;
    font-size: 11px;
  }

  .wxn-voices-mobile-v1__selector button:nth-child(3) span {
    margin-top: 19px;
  }

  .wxn-voices-mobile-v1__selector button.is-active span {
    width: 46px;
    height: 46px;
    margin-top: 14px;
    margin-bottom: 6px;
    font-size: 15px;
  }

  .wxn-voices-mobile-v1__selector button b {
    font-size: 9px;
  }

  .wxn-voices-mobile-v1__selector button small {
    font-size: 7px;
  }

  .wxn-voices-mobile-v1__hint {
    margin-top: -2px;
    margin-bottom: 9px;
  }
}

@keyframes wxnVoicePodiumArc {
  to { stroke-dashoffset: 0; }
}

@media (max-width: 360px) {
  .wxn-voices-mobile-v1 {
    min-height: 722px;
    background-position: center -56px;
  }

  .wxn-voices-mobile-v1__card {
    margin: 52px auto 0 !important;
  }
}