/* V151 mobile viewport-fit fix
   Desktop remains unchanged. These rules only activate on tablet/mobile widths and prevent
   the login/rules/app surfaces from being clipped on the right side. */

@media (max-width: 980px){
  html,
  body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    overscroll-behavior-x:none!important;
  }
  body.quiz-mobile-fit-v151{
    min-width:0!important;
    contain:none!important;
  }
  body.quiz-mobile-fit-v151 *,
  body.quiz-mobile-fit-v151 *::before,
  body.quiz-mobile-fit-v151 *::after{
    box-sizing:border-box!important;
    max-width:100%;
  }

  /* Login screen: one safe column, no right-side crop */
  body.quiz-mobile-fit-v151 #loginView:not(.hidden),
  body.quiz-mobile-fit-v151.login-shell,
  body.quiz-mobile-fit-v151 .login-shell{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:100svh!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    justify-items:center!important;
    align-items:start!important;
    justify-content:center!important;
    gap:12px!important;
    padding-left:max(10px,env(safe-area-inset-left))!important;
    padding-right:max(10px,env(safe-area-inset-right))!important;
    padding-top:12px!important;
    padding-bottom:22px!important;
    margin:0!important;
    overflow-x:hidden!important;
  }
  body.quiz-mobile-fit-v151 #loginView .login-card,
  body.quiz-mobile-fit-v151 #loginView .login-rules-card{
    width:100%!important;
    max-width:min(520px,calc(100vw - max(20px,calc(env(safe-area-inset-left) + env(safe-area-inset-right) + 20px))))!important;
    min-width:0!important;
    justify-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
    transform:none!important;
    overflow:hidden!important;
  }
  body.quiz-mobile-fit-v151 #loginView .brand-row,
  body.quiz-mobile-fit-v151 #loginView .rules-card-head,
  body.quiz-mobile-fit-v151 #loginView .login-form,
  body.quiz-mobile-fit-v151 #loginView .rules-scroll,
  body.quiz-mobile-fit-v151 #loginView .rules-footer-note,
  body.quiz-mobile-fit-v151 #loginView .login-window-status-v150{
    width:100%!important;
    min-width:0!important;
  }
  body.quiz-mobile-fit-v151 #loginView .brand-row > div:last-child{
    min-width:0!important;
    overflow:hidden!important;
  }
  body.quiz-mobile-fit-v151 #loginView h1,
  body.quiz-mobile-fit-v151 #loginView h2,
  body.quiz-mobile-fit-v151 #loginView p,
  body.quiz-mobile-fit-v151 #loginView strong,
  body.quiz-mobile-fit-v151 #loginView span,
  body.quiz-mobile-fit-v151 #loginView li,
  body.quiz-mobile-fit-v151 #loginView input,
  body.quiz-mobile-fit-v151 #loginView button{
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  body.quiz-mobile-fit-v151 #loginView input,
  body.quiz-mobile-fit-v151 #loginView button{
    width:100%!important;
    max-width:100%!important;
  }
  body.quiz-mobile-fit-v151 #loginView .rules-quick-grid{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.quiz-mobile-fit-v151 #loginView .rules-quick-grid div,
  body.quiz-mobile-fit-v151 #loginView .rules-scroll li{
    min-width:0!important;
  }
  body.quiz-mobile-fit-v151 #loginView .rules-scroll{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding-right:4px!important;
    scrollbar-gutter:auto!important;
  }

  /* App after login: keep every premium surface inside the phone viewport */
  body.quiz-mobile-fit-v151 #appView,
  body.quiz-mobile-fit-v151 .app-shell,
  body.quiz-mobile-fit-v151 .workspace{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    overflow-x:hidden!important;
  }
  body.quiz-mobile-fit-v151 .workspace{
    padding-left:max(9px,env(safe-area-inset-left))!important;
    padding-right:max(9px,env(safe-area-inset-right))!important;
  }
  body.quiz-mobile-fit-v151 .sidebar{
    width:calc(100vw - max(18px,calc(env(safe-area-inset-left) + env(safe-area-inset-right) + 18px)))!important;
    max-width:calc(100vw - max(18px,calc(env(safe-area-inset-left) + env(safe-area-inset-right) + 18px)))!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.quiz-mobile-fit-v151 .topbar,
  body.quiz-mobile-fit-v151 .hero,
  body.quiz-mobile-fit-v151 .section-card,
  body.quiz-mobile-fit-v151 .glass-panel,
  body.quiz-mobile-fit-v151 .final-quiz-panel,
  body.quiz-mobile-fit-v151 .final-quiz-work,
  body.quiz-mobile-fit-v151 .final-quiz-case,
  body.quiz-mobile-fit-v151 .final-quiz-question,
  body.quiz-mobile-fit-v151 .final-quiz-reading-card,
  body.quiz-mobile-fit-v151 .rules-gate-card-v147{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }
  body.quiz-mobile-fit-v151 .topbar{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  body.quiz-mobile-fit-v151 .profile-chip{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  body.quiz-mobile-fit-v151 .hero,
  body.quiz-mobile-fit-v151 .hero-panel,
  body.quiz-mobile-fit-v151 .final-quiz-brand-strip-v148,
  body.quiz-mobile-fit-v151 .rules-alert-row-v148,
  body.quiz-mobile-fit-v151 .rules-gate-grid-v147,
  body.quiz-mobile-fit-v151 .final-quiz-rules-v147,
  body.quiz-mobile-fit-v151 .final-quiz-scoregrid,
  body.quiz-mobile-fit-v151 .final-quiz-breakdown{
    min-width:0!important;
  }
  body.quiz-mobile-fit-v151 .final-quiz-reading-work{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  body.quiz-mobile-fit-v151 .final-quiz-reading-card{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  body.quiz-mobile-fit-v151 .final-quiz-reading-text,
  body.quiz-mobile-fit-v151 .final-quiz-options,
  body.quiz-mobile-fit-v151 .final-quiz-actions,
  body.quiz-mobile-fit-v151 .final-quiz-actions-row{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  body.quiz-mobile-fit-v151 .final-quiz-options label,
  body.quiz-mobile-fit-v151 .rules-gate-grid-v147 > div,
  body.quiz-mobile-fit-v151 .final-quiz-rules-v147 div,
  body.quiz-mobile-fit-v151 .final-quiz-scoregrid div,
  body.quiz-mobile-fit-v151 .final-quiz-breakdown div{
    min-width:0!important;
    overflow-wrap:anywhere!important;
  }
}

@media (max-width: 420px){
  body.quiz-mobile-fit-v151 #loginView:not(.hidden){
    padding-left:max(8px,env(safe-area-inset-left))!important;
    padding-right:max(8px,env(safe-area-inset-right))!important;
  }
  body.quiz-mobile-fit-v151 #loginView .login-card,
  body.quiz-mobile-fit-v151 #loginView .login-rules-card{
    max-width:calc(100vw - max(16px,calc(env(safe-area-inset-left) + env(safe-area-inset-right) + 16px)))!important;
    padding-left:13px!important;
    padding-right:13px!important;
    border-radius:20px!important;
  }
  body.quiz-mobile-fit-v151 #loginView .rules-quick-grid{
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
  body.quiz-mobile-fit-v151 #loginView .rules-scroll li{
    grid-template-columns:24px minmax(0,1fr)!important;
    column-gap:7px!important;
  }
  body.quiz-mobile-fit-v151 #loginView .rules-scroll li::before{
    width:24px!important;
    height:24px!important;
    border-radius:9px!important;
    font-size:9px!important;
  }
  body.quiz-mobile-fit-v151 .workspace{
    padding-left:max(8px,env(safe-area-inset-left))!important;
    padding-right:max(8px,env(safe-area-inset-right))!important;
  }
  body.quiz-mobile-fit-v151 .sidebar{
    width:calc(100vw - max(16px,calc(env(safe-area-inset-left) + env(safe-area-inset-right) + 16px)))!important;
    max-width:calc(100vw - max(16px,calc(env(safe-area-inset-left) + env(safe-area-inset-right) + 16px)))!important;
  }
}