/* ======================================================================
   OSANIME Auth Mobile Responsive Fix — v272
   Final mobile/layout guard for every user-facing auth screen.
   Loaded after v271 so it only normalizes presentation; backend/auth flow
   remains untouched.
   ====================================================================== */

body.auth-screen-page,
body.auth-screen-page * {
  min-width: 0;
}

body.auth-screen-page img,
body.auth-screen-page svg,
body.auth-screen-page video,
body.auth-screen-page canvas {
  max-width: 100%;
}

body.auth-screen-page :where(h1,h2,h3,p,span,strong,small,label,a) {
  overflow-wrap: anywhere;
}

@media (max-width: 920px) {
  body.auth-screen-page .auth-screen.auth-ui-shell-v250 {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
    justify-items: stretch !important;
    overflow: visible !important;
  }

  body.auth-screen-page .auth-left,
  body.auth-screen-page .auth-right,
  body.auth-screen-page .auth-card,
  body.auth-screen-page .login-card,
  body.auth-screen-page .register-card,
  body.auth-screen-page .forgot-card {
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
  }

  body.auth-screen-page .auth-left,
  body.auth-screen-page .auth-right {
    justify-self: center !important;
  }

  body.auth-screen-page .auth-footer {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  body.auth-screen-page .auth-screen.auth-ui-shell-v250 {
    padding-top: max(16px, env(safe-area-inset-top)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    gap: 16px !important;
  }

  body.auth-screen-page .auth-left {
    padding: 0 !important;
  }

  body.auth-screen-page .auth-logo {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
  }

  body.auth-screen-page .auth-logo img {
    width: auto !important;
    height: auto !important;
    max-height: 42px !important;
    max-width: min(168px, 54vw) !important;
    object-fit: contain !important;
  }

  body.auth-screen-page .auth-intro {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.auth-screen-page .auth-intro h1 {
    max-width: 100% !important;
    font-size: clamp(27px, 8.2vw, 34px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
  }

  body.auth-screen-page .auth-intro p {
    max-width: 100% !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  body.auth-screen-page .auth-right {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.auth-screen-page :where(.auth-card,.login-card,.register-card,.forgot-card) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 15px !important;
    border-radius: 17px !important;
  }

  body.auth-screen-page :where(input,select,textarea) {
    max-width: 100% !important;
    font-size: 16px !important;
  }

  body.auth-screen-page :where(button,.auth-submit-btn) {
    max-width: 100% !important;
    min-height: 48px !important;
  }

  body.auth-screen-page .auth-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    justify-items: center !important;
    padding-top: 12px !important;
    text-align: center !important;
  }

  body.auth-screen-page .auth-footer-logo {
    justify-self: center !important;
    max-width: 150px !important;
  }

  body.auth-screen-page .auth-footer-logo img {
    width: auto !important;
    height: auto !important;
    max-height: 28px !important;
    max-width: 145px !important;
  }

  body.auth-screen-page .auth-footer nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px 7px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }

  body.auth-screen-page .auth-footer p,
  body.auth-screen-page .auth-footer nav,
  body.auth-screen-page .auth-footer a {
    font-size: 10.5px !important;
    line-height: 1.5 !important;
  }
}

/* OAuth result/status page: v261 was missing the v250 body hook, so its base
   responsive layout did not apply at all on mobile. status.php v272 adds the
   hook; these rules make the result view intentionally compact. */
@media (max-width: 640px) {
  body.auth-oauth-flow-v261 .auth-oauth-flow-hero-v261 {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.auth-oauth-flow-v261 .auth-oauth-flow-eyebrow-v261 {
    margin: 0 auto 10px !important;
    padding: 7px 11px !important;
    font-size: 10px !important;
  }

  body.auth-oauth-flow-v261 .auth-oauth-flow-safe-v261 {
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 12px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    text-align: left !important;
  }

  body.auth-oauth-flow-v261 .auth-oauth-flow-card-v261 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 14px !important;
  }

  body.auth-oauth-flow-v261 .auth-oauth-flow-progress-v261 {
    grid-template-columns: 32px minmax(12px,1fr) 32px minmax(12px,1fr) 32px !important;
    margin-bottom: 16px !important;
  }

  body.auth-oauth-flow-v261 .auth-oauth-flow-progress-v261 > span {
    width: 32px !important;
    height: 32px !important;
  }

  body.auth-oauth-flow-v261 .auth-oauth-flow-progress-v261 > i {
    margin: 0 5px !important;
  }

  body.auth-oauth-flow-v261 .auth-oauth-flow-provider-v261 {
    display: grid !important;
    grid-template-columns: 42px minmax(0,1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
    margin-bottom: 14px !important;
  }

  body.auth-oauth-flow-v261 .auth-oauth-flow-provider-icon-v261 {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }

  body.auth-oauth-flow-v261 .auth-oauth-flow-result-chip-v261 {
    grid-column: 2 !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 5px 0 0 !important;
    white-space: normal !important;
  }

  body.auth-oauth-flow-v261 .auth-oauth-flow-result-v261 {
    display: grid !important;
    grid-template-columns: 40px minmax(0,1fr) !important;
    gap: 11px !important;
    padding: 14px 12px !important;
    border-radius: 15px !important;
  }

  body.auth-oauth-flow-v261 .auth-oauth-flow-result-v261 h2 {
    font-size: clamp(21px, 6.6vw, 27px) !important;
    line-height: 1.15 !important;
  }

  body.auth-oauth-flow-v261 .auth-oauth-flow-result-v261 p {
    font-size: 13px !important;
    line-height: 1.58 !important;
  }

  body.auth-oauth-flow-v261 .auth-oauth-flow-actions-v261 {
    margin-top: 15px !important;
  }

  body.auth-oauth-flow-v261 :where(.auth-oauth-flow-primary-v261,.auth-oauth-flow-secondary-v261) {
    width: 100% !important;
    min-height: 50px !important;
    padding: 10px 13px !important;
    text-align: center !important;
  }
}

/* OAuth registration completion pages share one layout; keep Google, Discord
   and Facebook consistent rather than fixing only the provider reported. */
@media (max-width: 640px) {
  body.auth-oauth-complete-v257 .oauth-stage2-eyebrow {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.auth-oauth-complete-v257 .oauth-stage2-provider-summary {
    width: 100% !important;
    overflow: hidden !important;
  }

  body.auth-oauth-complete-v257 .oauth-stage2-provider-summary > div,
  body.auth-oauth-complete-v257 .oauth-stage2-provider-summary strong,
  body.auth-oauth-complete-v257 .oauth-stage2-provider-summary span {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.auth-oauth-complete-v257 .oauth-stage2-provider-summary strong {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.auth-oauth-complete-v257 .oauth-stage4-email-note {
    grid-template-columns: 30px minmax(0,1fr) !important;
    padding: 10px !important;
  }

  body.auth-oauth-complete-v257 .oauth-stage2-agree {
    grid-template-columns: 20px minmax(0,1fr) !important;
  }
}

@media (max-width: 380px) {
  body.auth-screen-page .auth-screen.auth-ui-shell-v250 {
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }

  body.auth-screen-page :where(.auth-card,.login-card,.register-card,.forgot-card) {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  body.auth-oauth-flow-v261 .auth-oauth-flow-result-v261 {
    grid-template-columns: 36px minmax(0,1fr) !important;
  }

  body.auth-oauth-flow-v261 .auth-oauth-flow-result-icon-v261 {
    width: 36px !important;
    height: 36px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.auth-screen-page *,
  body.auth-screen-page *::before,
  body.auth-screen-page *::after {
    scroll-behavior: auto !important;
  }
}