/* StakeQuiz 3.0.57. Loaded ONLY by auth/login.ejs, after the existing login styles.
   Replaces the legacy fixed-viewport 1.1.187 stylesheet. No game/lobby/embed selectors.
   Normal document scrolling is intentional: fields remain reachable with the keyboard open. */
@media (max-width: 900px) {
  html {
    width: 100%; height: auto !important; min-height: 100%;
    overflow-y: auto !important; overflow-x: hidden;
  }
  body.auth-page.login-page.sq186-body.sq357-login {
    display: block !important; width: 100%; height: auto !important;
    min-height: 100vh; min-height: 100svh; max-height: none !important;
    margin: 0; padding: 0 !important; overflow: visible !important;
    background: radial-gradient(ellipse at 10% 10%, #15323988, transparent 55%),
      radial-gradient(ellipse at 95% 40%, #32274c66, transparent 50%), #090f19;
  }
  body.sq357-login .ambient { display: none; }
  body.sq357-login *, body.sq357-login *::before, body.sq357-login *::after { box-sizing: border-box; }

  /* Compact language control: width:auto on a block form previously filled the page. */
  body.auth-page.login-page.sq186-body.sq357-login .sq186-lang-box {
    position: relative !important; inset: auto !important; transform: none !important;
    display: flex !important; align-items: center; justify-content: flex-end;
    width: max-content !important; max-width: calc(100% - 24px) !important;
    margin: max(8px, env(safe-area-inset-top, 0px)) max(12px, calc((100% - 580px) / 2)) 10px auto !important;
    padding: 4px !important; gap: 0 !important;
    background: #0d1724 !important; border: 1px solid #655435 !important;
    border-radius: 12px !important; box-shadow: none !important; z-index: 10;
  }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-lang-label { display: none !important; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-lang-box select {
    width: auto !important; min-width: 120px !important; max-width: 220px !important;
    height: 40px !important; min-height: 40px !important;
    padding: 6px 30px 6px 12px !important; font-size: 14px !important; line-height: 1.35 !important;
  }

  /* One content flow, not absolute layers or a 100dvh-sized clipping container. */
  body.auth-page.login-page.sq186-body.sq357-login .sq186-stage {
    position: relative !important; inset: auto !important; display: flex !important;
    flex-direction: column; align-items: stretch !important; justify-content: flex-start !important;
    gap: 14px !important; width: calc(100% - 24px) !important; max-width: 580px !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    margin: 0 auto !important; padding: 0 0 max(20px, env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; transform: none !important;
  }
  body.sq357-login .sq342-auth-hero { padding: 0 4px !important; min-width: 0; }
  body.sq357-login .sq342-wordmark { margin: 0 0 10px !important; gap: 10px; font-size: 24px; }
  body.sq357-login .sq342-wordmark img { width: 42px; height: 42px; flex: 0 0 42px; }
  body.sq357-login .sq342-wordmark small { font-size: 8px; letter-spacing: .14em; }
  body.sq357-login .sq342-kicker { margin: 8px 0; font-size: 10px; letter-spacing: .1em; }
  body.sq357-login .sq342-auth-hero h1 {
    font-size: clamp(24px, 6.8vw, 32px) !important; line-height: 1.12 !important;
    margin: 8px 0 0 !important; max-width: 100%; overflow-wrap: anywhere;
  }
  body.sq357-login .sq342-auth-hero .sq342-lead { margin: 8px 0 0; font-size: 13px !important; line-height: 1.45 !important; }
  body.sq357-login .sq342-auth-hero .sq342-tags { margin: 10px 0 0 !important; gap: 6px; }
  body.sq357-login .sq342-auth-hero .sq342-auth-art,
  body.sq357-login .sq342-auth-hero .sq342-text-link { display: none !important; }

  /* MIXED mobile keeps its own hero copy/image; the form is never overlaid on it. */
  body.auth-page.login-page.sq186-body.sq357-login .sq186-hero {
    position: relative !important; inset: auto !important; height: auto !important;
    min-height: 0 !important; max-height: none !important; width: 100%;
    border-radius: 16px; overflow: hidden; background-position: center, center, center, center, 65% center;
  }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-left-copy {
    position: relative !important; inset: auto !important; width: 100% !important;
    max-width: none !important; padding: 14px 16px; margin: 0;
  }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-brand-row { gap: 10px; margin-bottom: 12px; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-logo { width: 42px !important; height: 42px !important; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-brand-copy strong { font-size: 24px; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-brand-copy small { font-size: 11px; line-height: 1.3; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-kicker { margin: 8px 0; font-size: 10px !important; letter-spacing: .09em; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-title { max-width: 100%; font-size: 28px !important; line-height: 1.12; margin: 8px 0 0; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-bodycopy { font-size: 13px; line-height: 1.4; max-width: 100%; margin: 10px 0 0; }
  body.sq357-login .sq186-features, body.sq357-login .sq186-bottom-tiles { display: none !important; }

  body.auth-page.login-page.sq186-body.sq357-login .sq186-card {
    position: relative !important; inset: auto !important; transform: none !important;
    display: block !important; flex: none; width: 100% !important; min-width: 0;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    margin: 0 !important; padding: 18px !important; overflow: visible !important;
    border-radius: 20px !important; border: 1px solid #465064; border-top: 2px solid #f1bf48;
    background: linear-gradient(155deg, #151f2d, #0a121e) !important;
    box-shadow: 0 12px 32px #0004 !important;
  }
  body.sq357-login .sq186-card-brand { display: none !important; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-tabs {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px;
  }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-tab {
    width: 100%; min-width: 0; height: auto !important; min-height: 44px !important;
    padding: 9px 6px; line-height: 1.3; font-size: 14px !important; text-align: center;
    white-space: normal; overflow-wrap: anywhere;
  }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-form { display: grid; gap: 12px !important; }
  body.sq357-login .sq186-field { margin: 0; min-width: 0; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-field input {
    display: block; height: 50px !important; min-height: 50px !important; width: 100%;
    padding: 12px 48px 12px 42px !important; font-size: 16px !important; line-height: 1.4;
    border-radius: 11px; scroll-margin-block: 16px;
  }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-field-icon { left: 14px; font-size: 17px; pointer-events: none; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-eye {
    display: flex; align-items: center; justify-content: center; right: 3px;
    width: 44px; height: 44px; padding: 0; font-size: 16px;
  }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-meta-row {
    display: flex; flex-wrap: wrap; flex-direction: column; align-items: flex-start;
    min-width: 0; gap: 6px; margin: 0 !important;
  }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-check {
    display: flex; min-height: 36px; align-items: center; gap: 9px; max-width: 100%;
    font-size: 13px !important; line-height: 1.4; white-space: normal !important;
  }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-check input { width: 20px; height: 20px; flex: 0 0 20px; margin: 0; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-forgot {
    display: inline-flex; align-items: center; max-width: 100%; min-height: 36px;
    padding: 6px 0; font-size: 13px !important; line-height: 1.45;
    white-space: normal !important; overflow-wrap: anywhere;
  }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-login-btn {
    height: auto !important; min-height: 48px !important; padding: 12px 10px;
    font-size: 16px !important; line-height: 1.3; white-space: normal;
  }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-divider { gap: 8px; margin: 16px 0 12px; font-size: 12px !important; line-height: 1.4; }
  body.sq357-login .sq186-divider span { white-space: normal !important; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-social-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-social-btn {
    height: auto !important; min-height: 44px !important; min-width: 0; padding: 9px 6px;
    gap: 7px; font-size: 13px !important; line-height: 1.3; overflow-wrap: anywhere;
  }
  body.sq357-login .sq186-social-ico { flex: 0 0 22px; width: 22px; height: 22px; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-register-line { display: block !important; font-size: 12px !important; line-height: 1.45; margin: 12px 0 0; overflow-wrap: anywhere; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-downloads { display: grid; grid-template-columns: minmax(0,1fr) !important; gap: 8px !important; margin-top: 12px !important; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-download {
    min-width: 0; height: auto !important; min-height: 60px !important;
    padding: 12px 10px; gap: 10px; overflow: visible;
  }
  body.sq357-login .sq186-download-icon { flex: 0 0 26px; font-size: 22px; }
  body.sq357-login .sq186-download-copy { min-width: 0; overflow-wrap: anywhere; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-download-copy strong { font-size: 13px !important; line-height: 1.35; white-space: normal; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-download-copy small { font-size: 11px !important; line-height: 1.4; white-space: normal; }
  body.sq357-login .sq186-flash { font-size: 14px !important; line-height: 1.5; overflow-wrap: anywhere; }
  body.sq357-login .sq352-links { max-width: 580px; width: calc(100% - 24px); margin: 0 auto 24px; }
  body.sq357-login .sq186-card :focus-visible { outline: 2px solid #6ce4e6; outline-offset: 2px; }
}
@media (max-width: 600px) {
  /* The form has priority on a phone. Full marketing copy remains on /skill. */
  body.sq357-login .sq342-auth-hero .sq342-lead,
  body.sq357-login .sq342-auth-hero .sq342-tags,
  body.auth-page.login-page.sq186-body.sq357-login .sq186-bodycopy { display: none !important; }
  body.auth-page.login-page.sq186-body.sq357-login .sq186-card { padding: 16px !important; }
}