/* V21 — fit the complete auth form inside phone viewports without page scrolling. */

@media (max-width: 820px), (orientation: portrait) {
  body[data-app-screen='auth'],
  body.view-auth,
  #auth-screen.auth-screen {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  #auth-screen .auth-card.auth-experience {
    display: flex !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #auth-screen .auth-showcase {
    flex: 0 0 clamp(112px, 23dvh, 205px) !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
  }

  #auth-screen .auth-logo-wrap {
    width: clamp(112px, 31vw, 168px) !important;
    padding: 4px 8px !important;
    border-radius: 14px !important;
  }

  #auth-screen .auth-brand-logo {
    height: clamp(51px, 14vw, 76px) !important;
  }

  #auth-screen .auth-panel {
    flex: 1 1 auto !important;
    width: calc(100% - 12px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: -6px 6px 6px !important;
    padding: clamp(12px, 2.2dvh, 20px) clamp(13px, 4vw, 22px) !important;
    overflow: hidden !important;
    border-radius: clamp(18px, 5vw, 25px) !important;
  }

  #auth-screen .auth-panel::before {
    display: none !important;
  }

  #auth-screen .auth-panel-heading h2 {
    margin: 0 0 5px !important;
    font-size: clamp(21px, 6vw, 28px) !important;
    line-height: 1.05 !important;
  }

  #auth-screen .auth-panel-heading p {
    max-width: 100% !important;
    margin: 0 auto clamp(8px, 1.4dvh, 13px) !important;
    font-size: clamp(10px, 3vw, 13px) !important;
    line-height: 1.3 !important;
  }

  #auth-screen .input-group {
    margin-bottom: clamp(6px, 1dvh, 9px) !important;
  }

  #auth-screen .input-shell {
    min-height: clamp(42px, 6.2dvh, 50px) !important;
    border-radius: 13px !important;
  }

  #auth-screen .input-shell > span {
    width: 43px !important;
    min-width: 43px !important;
  }

  #auth-screen .input-shell > span::after {
    font-size: 18px !important;
    line-height: clamp(40px, 6dvh, 48px) !important;
  }

  #auth-screen .input-shell input {
    min-height: clamp(40px, 6dvh, 48px) !important;
    font-size: clamp(12px, 3.5vw, 15px) !important;
  }

  #auth-screen .auth-login-options {
    align-items: center !important;
    flex-direction: row !important;
    margin: 0 2px clamp(6px, 1.1dvh, 10px) !important;
    font-size: clamp(9px, 2.7vw, 12px) !important;
  }

  #auth-screen .auth-login-options input {
    width: 15px !important;
    height: 15px !important;
  }

  #auth-screen .auth-main-action {
    min-height: clamp(43px, 6.4dvh, 51px) !important;
    border-radius: 14px !important;
    font-size: clamp(14px, 4vw, 17px) !important;
  }

  #auth-screen .auth-main-action::before {
    font-size: 19px !important;
  }

  #auth-screen .auth-divider {
    margin: clamp(6px, 1.2dvh, 10px) 0 !important;
    font-size: 10px !important;
  }

  #auth-screen .google-btn {
    min-height: clamp(42px, 6.2dvh, 50px) !important;
    border-radius: 14px !important;
    font-size: clamp(12px, 3.5vw, 15px) !important;
  }

  #auth-screen .google-mark {
    width: 26px !important;
    height: 26px !important;
    font-size: 15px !important;
  }

  #auth-screen .auth-tabs {
    gap: 4px !important;
    margin: clamp(6px, 1.2dvh, 10px) 0 0 !important;
    padding: 3px !important;
  }

  #auth-screen .auth-tab {
    min-height: clamp(32px, 4.8dvh, 38px) !important;
    font-size: clamp(10px, 2.8vw, 12px) !important;
  }

  #auth-screen .auth-message {
    min-height: 0 !important;
    margin: 4px 0 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
}

/* Very short portrait phones: preserve all controls, reduce decorative copy. */
@media (orientation: portrait) and (max-height: 700px) {
  #auth-screen .auth-showcase {
    flex-basis: clamp(88px, 17dvh, 116px) !important;
  }

  #auth-screen .auth-panel-heading p {
    display: none !important;
  }

  #auth-screen .auth-panel-heading h2 {
    margin-bottom: 8px !important;
  }

  #auth-screen .auth-divider {
    margin: 5px 0 !important;
  }
}

/* Phone landscape: use rows and columns instead of stacking everything vertically. */
@media (orientation: landscape) and (max-height: 520px) {
  body[data-app-screen='auth'],
  body.view-auth,
  #auth-screen.auth-screen,
  #auth-screen .auth-card.auth-experience {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #auth-screen .auth-card.auth-experience {
    display: grid !important;
    grid-template-columns: minmax(210px, 38%) minmax(0, 62%) !important;
    background:
      linear-gradient(90deg, transparent 0%, rgba(3, 24, 88, .32) 100%),
      url('../assets/login-adventure-landscape-v20.png') center / cover no-repeat !important;
  }

  #auth-screen .auth-showcase {
    display: block !important;
    min-height: 0 !important;
    padding: 10px !important;
    background: linear-gradient(90deg, rgba(3, 48, 139, .42), transparent) !important;
  }

  #auth-screen .auth-season-badge,
  #auth-screen .auth-feature-grid,
  #auth-screen .auth-showcase-footer {
    display: none !important;
  }

  #auth-screen .auth-hero-copy {
    position: absolute !important;
    left: 10px !important;
    bottom: 10px !important;
    display: block !important;
    width: calc(100% - 20px) !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(255, 255, 255, .34) !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, rgba(7, 51, 145, .78), rgba(57, 42, 157, .7)) !important;
    box-shadow: 0 9px 22px rgba(1, 21, 76, .27) !important;
    backdrop-filter: blur(8px) !important;
  }

  #auth-screen .auth-hero-copy .auth-kicker,
  #auth-screen .auth-hero-copy p {
    display: none !important;
  }

  #auth-screen .auth-hero-copy h1 {
    max-width: none !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(17px, 2.55vw, 23px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.025em !important;
    text-align: left !important;
    text-shadow: 0 3px 9px rgba(1, 20, 74, .5) !important;
  }

  #auth-screen .auth-hero-copy h1 span {
    color: #ffe252 !important;
  }

  #auth-screen .auth-logo-wrap {
    width: clamp(105px, 17vw, 150px) !important;
    padding: 4px 7px !important;
  }

  #auth-screen .auth-brand-logo {
    height: clamp(48px, 8vw, 68px) !important;
  }

  #auth-screen .auth-panel {
    position: relative !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    align-self: center !important;
    align-content: center !important;
    gap: clamp(5px, 1.3vh, 8px) 8px !important;
    width: calc(100% - 12px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 16px) !important;
    margin: 8px auto !important;
    padding: clamp(10px, 2vh, 16px) !important;
    overflow: hidden !important;
    border-radius: 20px !important;
  }

  #auth-screen .auth-panel::before,
  #auth-screen .auth-divider,
  #auth-screen .auth-runtime-line {
    display: none !important;
  }

  #auth-screen .auth-panel-heading {
    grid-column: 1 / -1 !important;
  }

  #auth-screen .auth-panel-heading h2 {
    margin: 0 0 2px !important;
    font-size: clamp(18px, 4.4vh, 24px) !important;
  }

  #auth-screen .auth-panel-heading p {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    color: #dce9ff !important;
    font-size: clamp(9px, 2.6vh, 11px) !important;
    line-height: 1.15 !important;
  }

  #auth-screen .input-group {
    margin: 0 !important;
  }

  #auth-screen .input-group.register-only {
    grid-column: 5 / 7 !important;
  }

  #auth-screen .input-group:has(#authEmailInput) {
    grid-column: 1 / 4 !important;
  }

  #auth-screen .input-group:has(#authPasswordInput) {
    grid-column: 4 / 7 !important;
  }

  #auth-screen .auth-login-options {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: clamp(18px, 5vw, 42px) !important;
    margin: 0 !important;
    font-size: clamp(9px, 2.5vh, 11px) !important;
  }

  #auth-screen .auth-login-options input {
    width: 13px !important;
    height: 13px !important;
  }

  #auth-screen .input-shell,
  #auth-screen .input-shell input {
    min-height: clamp(38px, 10vh, 45px) !important;
  }

  #auth-screen .input-shell > span::after {
    line-height: clamp(36px, 9.5vh, 43px) !important;
  }

  #auth-screen .auth-main-action {
    grid-column: 1 / 4 !important;
    min-height: clamp(39px, 10.5vh, 47px) !important;
  }

  #auth-screen .google-btn {
    grid-column: 4 / 7 !important;
    min-height: clamp(39px, 10.5vh, 47px) !important;
  }

  #auth-screen .auth-tabs {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
  }

  #auth-screen .auth-tab {
    min-height: clamp(28px, 7.8vh, 35px) !important;
  }

  #auth-screen .auth-message,
  #auth-screen .firebase-domain-help {
    grid-column: 1 / -1 !important;
    margin: 0 !important;
  }
}

@media (orientation: landscape) and (max-height: 390px) {
  #auth-screen .auth-panel {
    max-height: calc(100dvh - 12px) !important;
    margin-block: 6px !important;
    padding-block: 9px !important;
  }
}

@media (orientation: landscape) and (max-width: 600px) and (max-height: 520px) {
  #auth-screen .auth-showcase {
    display: none !important;
  }

  #auth-screen .auth-card.auth-experience {
    grid-template-columns: 1fr !important;
  }

  #auth-screen .auth-panel {
    width: min(560px, calc(100% - 12px)) !important;
    margin-inline: auto !important;
  }
}