.app-shell.route-play {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

body:has(#root .app-shell.route-test) #simplelay-legal-root {
  display: none;
}

.app-shell.route-test .detail-playbar {
  right: auto !important;
  left: 50% !important;
  width: min(100%, 430px);
  box-sizing: border-box;
  transform: translateX(-50%);
}

.app-shell.route-play main {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

.app-shell.route-play .page-stack {
  width: min(430px, 100%);
  height: 630px !important;
  min-height: 630px !important;
  max-height: 630px !important;
  margin-inline: auto;
  overflow: hidden !important;
}

.app-shell.route-play .page-stack > .play-panel {
  width: 100%;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box;
}

body:has(#root .app-shell:not(.route-admin))
  #simplelay-legal-root:has(.sl-footer) {
  width: min(100%, 430px);
  margin-inline: auto;
}

body:has(#root .app-shell:not(.route-admin)) .sl-footer {
  width: 100%;
}

body:has(#root .app-shell:not(.route-admin)) .sl-footer__inner,
body:has(#root .app-shell:not(.route-admin)) .sl-footer__bottom {
  width: calc(100% - 36px);
}

@media (min-width: 681px) {
  body:has(#root .app-shell:not(.route-admin)) .sl-footer__inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 28px;
    padding: 34px 0 27px;
  }

  body:has(#root .app-shell:not(.route-admin)) .sl-footer__nav {
    width: 100%;
    justify-content: space-between;
  }

  body:has(#root .app-shell:not(.route-admin)) .sl-footer__bottom {
    flex-direction: column;
    gap: 7px;
    padding-bottom: 100px;
  }
}