/* QuizLuck mobile website — native-app visual polish + 15% larger icons.
 * Phone-only override based on the QuizLuck Android reference screenshots supplied 2026-08-19.
 * Presentation only: no auth, billing, study, data, routing, avatar, or music behavior changes.
 */
@media (max-width: 767px) {
  html body.ql-mobile-app-parity:not(.study-active) {
    --ql-native-top-size: 44px;
    --ql-native-icon-size: 28px;
    --ql-native-topbar-height: 72px;
    --ql-native-bottom-height: 70px;
    --ql-native-gutter: 16px;
    --ql-native-card-radius: 26px;
  }

  /* Explicit QuizLuck theme always wins over OS preference. */
  html[data-ql-theme='light'] body.ql-mobile-app-parity:not(.study-active) {
    --ql-app-bg: #f8f9fd;
    --ql-app-text: #171927;
    --ql-app-surface: #ffffff;
    --ql-app-surface-variant: #f0f2f8;
    --ql-app-muted: #667085;
    --ql-app-outline: #cfd5e3;
    --ql-app-outline-variant: #e2e6ef;
    --ql-app-brand: #5a57f6;
    --ql-app-brand-strong: #3d3bdd;
    --ql-app-brand-soft: #ececff;
    color-scheme: light;
  }

  html[data-ql-theme='dark'] body.ql-mobile-app-parity:not(.study-active) {
    --ql-app-bg: #08072d;
    --ql-app-text: #f7f7ff;
    --ql-app-surface: #17183b;
    --ql-app-surface-variant: #24264d;
    --ql-app-muted: #c3c8da;
    --ql-app-outline: #454a70;
    --ql-app-outline-variant: #34375e;
    --ql-app-brand: #8b86ff;
    --ql-app-brand-strong: #ecebff;
    --ql-app-brand-soft: #2d2c6b;
    color-scheme: dark;
  }

  /* ===== Native-style top bar ===== */
  .ql-mobile-app-topbar {
    min-height: calc(var(--ql-native-topbar-height) + env(safe-area-inset-top)) !important;
    padding: calc(10px + env(safe-area-inset-top)) max(var(--ql-native-gutter), env(safe-area-inset-right)) 10px max(var(--ql-native-gutter), env(safe-area-inset-left)) !important;
    gap: 7px !important;
    background: var(--ql-app-bg) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  .ql-mobile-app-topbar-spacer {
    min-width: 2px !important;
    flex: 1 1 auto !important;
  }

  .ql-mobile-app-circle,
  .ql-mobile-app-avatar,
  .ql-mobile-app-topbar .ql-mobile-app-menu-button,
  .ql-mobile-app-topbar .ql-mobile-app-language {
    flex: 0 0 var(--ql-native-top-size) !important;
    width: var(--ql-native-top-size) !important;
    min-width: var(--ql-native-top-size) !important;
    height: var(--ql-native-top-size) !important;
    min-height: var(--ql-native-top-size) !important;
    padding: 0 !important;
    border: 1px solid color-mix(in srgb, var(--ql-app-outline) 78%, transparent) !important;
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--ql-app-brand-soft) 76%, var(--ql-app-surface)) !important;
    color: var(--ql-app-brand-strong) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent) !important;
  }

  .ql-mobile-app-circle svg,
  .ql-mobile-app-avatar svg,
  .ql-mobile-app-topbar .ql-mobile-app-menu-button svg,
  .ql-mobile-app-topbar .ql-mobile-app-language svg {
    width: var(--ql-native-icon-size) !important;
    height: var(--ql-native-icon-size) !important;
    stroke-width: 1.9 !important;
  }

  .ql-mobile-app-topbar .ql-theme-toggle.is-compact {
    flex: 0 0 54px !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 4px !important;
    border-radius: 999px !important;
  }

  .ql-mobile-app-premium {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 15px !important;
    gap: 7px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
  }

  .ql-mobile-app-premium svg {
    width: 23px !important;
    height: 23px !important;
  }

  /* ===== Native-style bottom navigation ===== */
  html body.ql-mobile-app-parity.ql-mobile-app-main:not(.study-active) #app.app-shell {
    padding-bottom: calc(var(--ql-native-bottom-height) + 28px + env(safe-area-inset-bottom)) !important;
  }

  .ql-mobile-app-bottomnav {
    height: calc(var(--ql-native-bottom-height) + env(safe-area-inset-bottom)) !important;
    padding: 0 max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left)) !important;
    align-items: center !important;
    border-top: 1px solid color-mix(in srgb, var(--ql-app-outline-variant) 80%, transparent) !important;
    background: var(--ql-app-surface) !important;
    box-shadow: 0 -8px 24px color-mix(in srgb, #000 8%, transparent) !important;
  }

  .ql-mobile-app-bottomnav a {
    min-height: var(--ql-native-bottom-height) !important;
    color: color-mix(in srgb, var(--ql-app-muted) 92%, var(--ql-app-text)) !important;
  }

  .ql-mobile-app-bottomnav a span {
    width: 50px !important;
    height: 34px !important;
    border-radius: 18px !important;
    background: transparent !important;
    transition: background-color .16s ease, color .16s ease !important;
  }

  .ql-mobile-app-bottomnav a svg {
    width: 28px !important;
    height: 28px !important;
    stroke-width: 1.9 !important;
  }

  .ql-mobile-app-bottomnav a[aria-current='page'] {
    color: var(--ql-app-brand-strong) !important;
  }

  .ql-mobile-app-bottomnav a[aria-current='page'] span {
    background: color-mix(in srgb, var(--ql-app-brand-soft) 88%, var(--ql-app-surface)) !important;
  }

  /* ===== Home: same hierarchy and rhythm as the app reference ===== */
  .ql-mobile-app-home {
    gap: 22px !important;
    padding: 18px 0 28px !important;
  }

  .ql-mobile-app-home-pad {
    margin-inline: 22px !important;
  }

  .ql-mobile-app-welcome {
    gap: 6px !important;
  }

  .ql-mobile-app-welcome h1 {
    font-size: clamp(27px, 7.4vw, 31px) !important;
    line-height: 1.16 !important;
    font-weight: 850 !important;
    letter-spacing: -.45px !important;
  }

  .ql-mobile-app-welcome p {
    font-size: 16px !important;
    line-height: 23px !important;
  }

  .ql-mobile-app-section,
  .ql-mobile-app-recents {
    gap: 12px !important;
  }

  .ql-mobile-app-section-head h2,
  .ql-mobile-app-section > h2,
  .ql-mobile-app-section-title h2 {
    font-size: 22px !important;
    line-height: 28px !important;
    font-weight: 850 !important;
  }

  .ql-mobile-app-section-head p {
    margin-top: 4px !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .ql-mobile-app-jump-card {
    gap: 15px !important;
    padding: 21px !important;
    border-radius: var(--ql-native-card-radius) !important;
  }

  .ql-mobile-app-jump-card h3 {
    font-size: 20px !important;
    line-height: 26px !important;
  }

  .ql-mobile-app-progress-track {
    height: 9px !important;
  }

  .ql-mobile-app-continue {
    min-height: 52px !important;
    border-radius: 26px !important;
    font-size: 15px !important;
  }

  .ql-mobile-app-topic-row,
  .ql-mobile-app-book-row {
    min-height: 126px !important;
    padding: 15px !important;
    border-radius: var(--ql-native-card-radius) !important;
  }

  .ql-mobile-app-topic-media,
  .ql-mobile-app-book-cover {
    width: 98px !important;
    height: 98px !important;
    border-radius: 22px !important;
  }

  .ql-mobile-app-topic-title,
  .ql-mobile-app-book-copy > strong {
    font-size: 18px !important;
    line-height: 23px !important;
    font-weight: 850 !important;
  }

  /* ===== Profile/account: organized like the native app screenshot ===== */
  html body.ql-mobile-app-profile:not(.study-active) #app.app-shell {
    padding: 18px max(22px, env(safe-area-inset-right)) calc(var(--ql-native-bottom-height) + 28px + env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)) !important;
  }

  .ql-mobile-app-profile-screen {
    gap: 18px !important;
  }

  .ql-mobile-app-profile-identity {
    gap: 8px !important;
  }

  .ql-mobile-app-profile-avatar {
    width: 96px !important;
    height: 96px !important;
    font-size: 32px !important;
    line-height: 38px !important;
  }

  .ql-mobile-app-profile-identity h2 {
    font-size: 22px !important;
    line-height: 28px !important;
  }

  .ql-mobile-app-profile-actions {
    gap: 12px !important;
  }

  .ql-mobile-app-profile-action {
    min-height: 74px !important;
    padding: 15px 16px !important;
    border-radius: 25px !important;
    border-color: color-mix(in srgb, var(--ql-app-outline) 72%, transparent) !important;
    background: var(--ql-app-surface) !important;
  }

  .ql-mobile-app-profile-action svg {
    width: 33px !important;
    height: 33px !important;
  }

  .ql-mobile-app-profile-action strong {
    margin-left: 11px !important;
    font-size: 16px !important;
    line-height: 22px !important;
  }

  .ql-mobile-app-profile-list {
    gap: 18px !important;
  }

  .ql-mobile-app-settings-row {
    grid-template-columns: 50px minmax(0, 1fr) 24px !important;
    gap: 14px !important;
    min-height: 86px !important;
    padding: 14px 16px !important;
    border-radius: 26px !important;
    border-color: color-mix(in srgb, var(--ql-app-outline) 72%, transparent) !important;
    background: var(--ql-app-surface) !important;
  }

  .ql-mobile-app-settings-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--ql-app-brand-soft) 90%, var(--ql-app-surface)) !important;
    color: var(--ql-app-brand) !important;
  }

  .ql-mobile-app-settings-icon svg {
    width: 31px !important;
    height: 31px !important;
  }

  .ql-mobile-app-settings-copy {
    gap: 3px !important;
  }

  .ql-mobile-app-settings-copy strong {
    font-size: 16px !important;
    line-height: 22px !important;
    font-weight: 800 !important;
  }

  .ql-mobile-app-settings-copy small {
    font-size: 14px !important;
    line-height: 19px !important;
  }

  .ql-mobile-app-settings-chevron,
  .ql-mobile-app-settings-chevron svg {
    width: 26px !important;
    height: 26px !important;
  }

  .ql-mobile-app-signout {
    min-height: 72px !important;
    border-radius: 26px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }

  .ql-mobile-app-signout svg {
    width: 30px !important;
    height: 30px !important;
  }

  /* Accessibility: visible focus without changing layout. */
  :is(.ql-mobile-app-topbar, .ql-mobile-app-bottomnav, .ql-mobile-app-profile-screen)
    :is(a, button, label):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ql-app-brand) 38%, transparent) !important;
    outline-offset: 2px !important;
  }

}

@media (max-width: 390px) {

    .ql-mobile-app-topbar {
      padding-left: max(8px, env(safe-area-inset-left)) !important;
      padding-right: max(8px, env(safe-area-inset-right)) !important;
      gap: 4px !important;
    }

    .ql-mobile-app-circle,
    .ql-mobile-app-avatar,
    .ql-mobile-app-topbar .ql-mobile-app-menu-button,
    .ql-mobile-app-topbar .ql-mobile-app-language {
      --ql-native-top-size: 40px;
      --ql-native-icon-size: 25px;
    }

    .ql-mobile-app-topbar .ql-theme-toggle.is-compact {
      flex-basis: 48px !important;
      width: 48px !important;
      min-width: 48px !important;
      height: 31px !important;
      min-height: 31px !important;
    }

    .ql-mobile-app-premium {
      height: 40px !important;
      min-height: 40px !important;
      padding-inline: 10px !important;
      gap: 5px !important;
      font-size: 12px !important;
    }

    .ql-mobile-app-premium svg {
      width: 20px !important;
      height: 20px !important;
    }

    .ql-mobile-app-home-pad {
      margin-inline: 18px !important;
    }

    html body.ql-mobile-app-profile:not(.study-active) #app.app-shell {
      padding-left: max(18px, env(safe-area-inset-left)) !important;
      padding-right: max(18px, env(safe-area-inset-right)) !important;
    }

    .ql-mobile-app-profile-action strong,
    .ql-mobile-app-settings-copy strong {
      font-size: 15px !important;
    }

}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .ql-mobile-app-bottomnav a span {
    transition: none !important;
  }
}