/* === Live push auth + mobile navigation stabilization === */
html[data-ma-signed-in="true"] #profileSignInBtn,
html[data-ma-signed-in="true"] #studyProfileSignIn,
html[data-ma-signed-in="true"] #identitySignInBtn,
html[data-ma-signed-in="true"] [data-profile-sign-in],
html[data-ma-signed-in="true"] [data-ma-sign-in]{display:none!important;visibility:hidden!important;pointer-events:none!important;}
html[data-ma-signed-in="false"] #profileSignOutBtn,
html[data-ma-signed-in="false"] #studyProfileSignOut,
html[data-ma-signed-in="false"] #identitySignOutBtn,
html[data-ma-signed-in="false"] [data-profile-sign-out],
html[data-ma-signed-in="false"] [data-ma-sign-out]{display:none!important;visibility:hidden!important;pointer-events:none!important;}
html[data-ma-signed-in="true"] #profileSignOutBtn,
html[data-ma-signed-in="true"] #studyProfileSignOut,
html[data-ma-signed-in="true"] #identitySignOutBtn,
html[data-ma-signed-in="true"] [data-profile-sign-out],
html[data-ma-signed-in="true"] [data-ma-sign-out],
html[data-ma-signed-in="false"] #profileSignInBtn,
html[data-ma-signed-in="false"] #studyProfileSignIn,
html[data-ma-signed-in="false"] #identitySignInBtn,
html[data-ma-signed-in="false"] [data-profile-sign-in],
html[data-ma-signed-in="false"] [data-ma-sign-in]{visibility:visible!important;pointer-events:auto!important;}

@media (max-width: 820px){
  body{overflow-x:hidden!important;}
  .topbar,.branch-nav,.study-nav,.nav-shell,.site-header,.app-nav{
    width:calc(100vw - 16px)!important;
    max-width:calc(100vw - 16px)!important;
    margin-left:8px!important;
    margin-right:8px!important;
    left:0!important;
    right:0!important;
    box-sizing:border-box!important;
    border-radius:22px!important;
  }
  .topbar,.branch-nav,.nav-shell,.site-header,.app-nav{
    padding:8px!important;
    min-height:0!important;
  }
  .study-nav{
    top:8px!important;
    padding:8px!important;
    gap:8px!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    align-items:center!important;
  }
  .study-brand,.branch-brand,.brand{
    min-width:0!important;
    overflow:hidden!important;
  }
  .study-brand-text,.branch-meta,.brand-text{min-width:0!important;}
  .study-title,.branch-name,.brand-name{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    max-width:52vw!important;
  }
  .study-platform,.branch-kicker{font-size:10px!important;letter-spacing:.12em!important;}
  .study-mark,.branch-mark,.logo-mark,.brand-mark{
    width:38px!important;height:38px!important;min-width:38px!important;border-radius:14px!important;font-size:14px!important;
  }
  .study-links,.branch-links,.nav{
    grid-column:1 / -1!important;
    display:flex!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    gap:8px!important;
    padding:2px 0 3px!important;
    scrollbar-width:none!important;
    justify-content:flex-start!important;
  }
  .study-links::-webkit-scrollbar,.branch-links::-webkit-scrollbar,.nav::-webkit-scrollbar{display:none!important;}
  .study-link,.branch-link,.nav-link,.study-nav-btn,.profile-trigger{
    flex:0 0 auto!important;
    min-height:42px!important;
    height:42px!important;
    padding:0 14px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:nowrap!important;
    line-height:1!important;
    border-radius:999px!important;
    font-size:14px!important;
  }
  .study-nav-actions{
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:8px!important;
    min-width:0!important;
  }
  .study-nav-btn.profile-trigger > span:not(.profile-dot),
  .profile-trigger > span:not(.profile-dot){display:none!important;}
  .study-nav-btn.hide{
    min-width:42px!important;
    width:42px!important;
    padding:0!important;
    font-size:0!important;
  }
  .study-nav-btn.hide::after{content:"–";font-size:24px;line-height:1;font-weight:900;}
  .study-nav-handle{
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    bottom:calc(12px + env(safe-area-inset-bottom))!important;
    top:auto!important;
    z-index:120!important;
    min-height:46px!important;
    padding:0 18px!important;
    border-radius:999px!important;
  }
  
  .ma-save-grid, .ma-utility-grid {
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  
  .shell,.app-shell,.main,.container,.page-wrap{width:100%!important;max-width:100vw!important;box-sizing:border-box!important;}
}

@media (max-width: 520px){
  .study-title,.branch-name,.brand-name{max-width:45vw!important;font-size:14px!important;}
  .study-link,.branch-link,.nav-link{font-size:13px!important;padding:0 12px!important;}
  .study-nav{grid-template-columns:minmax(0,1fr) auto!important;}
  .profile-dot{width:32px!important;height:32px!important;min-width:32px!important;}
}

/* v2.8.9 loader safety: keep the branded loading screen, but never let a stale script trap the app forever. */
#maLoadingScreen {
  animation: maLoaderSafetyFade 0.25s ease 3.6s forwards;
}
#maLoadingScreen.done {
  animation: none;
}
@keyframes maLoaderSafetyFade {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}


:root{--ma-mobile-gutter: clamp(14px, 4vw, 24px);}
html, body{max-width:100%; overflow-x:hidden;}

@media (max-width: 900px){
  body{padding-left:var(--ma-mobile-gutter)!important;padding-right:var(--ma-mobile-gutter)!important;}
  .shell,.app-shell,.main,.container,.page,.content{width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;}
}

/* Phone nav: stable two-row card. Profile/avatar lives on row 1 and never covers row 2. */
@media (max-width: 760px), (max-width: 900px) and (orientation: portrait){
  .topbar,.branch-nav,.study-nav{
    width:100%!important;max-width:100%!important;margin:12px auto 18px!important;
    padding:14px!important;border-radius:28px!important;overflow:hidden!important;
    display:grid!important;grid-template-columns:1fr auto!important;grid-template-rows:auto auto!important;
    gap:12px!important;align-items:center!important;position:relative!important;top:auto!important;
  }
  .brand,.branch-brand,.study-brand{
    grid-column:1!important;grid-row:1!important;max-width:calc(100vw - 132px)!important;
    min-width:0!important;display:inline-flex!important;align-items:center!important;gap:12px!important;
  }
  .brand-mark,.branch-mark,.study-mark{width:52px!important;height:52px!important;min-width:52px!important;border-radius:18px!important;}
  .brand-name,.branch-name,.study-title{font-size:clamp(1.05rem,4.7vw,1.4rem)!important;line-height:1.06!important;white-space:normal!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .brand-sub,.branch-kicker,.study-platform,.study-brand-text{display:none!important;}

  .branch-links,.study-links,.nav{
    grid-column:1 / -1!important;grid-row:2!important;display:flex!important;align-items:center!important;
    gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important;
    overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;
    padding:2px 0 4px!important;margin:0!important;scroll-padding-inline:0!important;
  }
  .branch-links::-webkit-scrollbar,.study-links::-webkit-scrollbar,.nav::-webkit-scrollbar{display:none!important;}
  .branch-link,.study-link,.nav-link,.study-nav-btn.hide{
    flex:0 0 auto!important;min-width:max-content!important;height:46px!important;padding:0 15px!important;
    border-radius:999px!important;font-size:clamp(.9rem,3.7vw,1.02rem)!important;line-height:1!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;
  }

  /* Profile button: one fixed location inside the nav card, not part of the scroller. */
  .branch-links > .profile-trigger,
  .nav > .profile-trigger,
  .topbar > .profile-trigger,
  .study-nav-btn.profile-trigger,
  #profileOpenBtn,#studyProfileBtn{
    position:absolute!important;top:14px!important;right:14px!important;z-index:8!important;
    width:56px!important;height:56px!important;min-width:56px!important;max-width:56px!important;
    padding:0!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
    overflow:hidden!important;transform:none!important;margin:0!important;
  }
  .profile-trigger > span:not(.profile-dot),.study-nav-btn.profile-trigger > span:not(.profile-dot),#profileOpenBtn > span:not(.profile-dot),#studyProfileBtn > span:not(.profile-dot){display:none!important;}
  .profile-dot,#topProfileDot,#profileDot,#studyTopProfileDot{width:42px!important;height:42px!important;min-width:42px!important;border-radius:999px!important;overflow:hidden!important;font-size:0!important;}
  .profile-dot img,#topProfileDot img,#profileDot img,#studyTopProfileDot img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;}
  .study-nav-actions{display:contents!important;}
  .study-nav-btn.hide{position:static!important;order:99!important;}
}

/* Very small phones: use a compact header and reduce oversized hero/card typography. */
@media (max-width: 520px){
  body{padding-left:12px!important;padding-right:12px!important;}
  .topbar,.branch-nav,.study-nav{border-radius:24px!important;padding:12px!important;gap:10px!important;margin-top:10px!important;}
  .brand-mark,.branch-mark,.study-mark{width:48px!important;height:48px!important;min-width:48px!important;border-radius:16px!important;}
  .branch-links > .profile-trigger,.nav > .profile-trigger,.topbar > .profile-trigger,.study-nav-btn.profile-trigger,#profileOpenBtn,#studyProfileBtn{top:12px!important;right:12px!important;width:52px!important;height:52px!important;min-width:52px!important;max-width:52px!important;}
  .profile-dot,#topProfileDot,#profileDot,#studyTopProfileDot{width:39px!important;height:39px!important;min-width:39px!important;}
  .branch-link,.study-link,.nav-link,.study-nav-btn.hide{height:44px!important;padding:0 13px!important;font-size:.94rem!important;}

  .main-title,.hero-title{font-size:clamp(3rem,17vw,4.4rem)!important;letter-spacing:-.07em!important;line-height:.92!important;}
  .hero,.hero-card,.landing-hero{padding:24px!important;border-radius:28px!important;}
  .hero-tagline,.hero-lead,.hero-copy{font-size:clamp(1.18rem,6vw,1.7rem)!important;line-height:1.35!important;}
  .launch-row,.branch-grid,.cards-grid{grid-template-columns:1fr!important;gap:16px!important;}
  .launch-card,.branch-card,.mode-card{min-height:auto!important;padding:22px!important;border-radius:26px!important;}
  .launch-title,.branch-card h2,.mode-card h2{font-size:clamp(2rem,10vw,3rem)!important;line-height:1!important;}
}

/* Practice pages on phones: keep the trainer card usable and stop the modifier bar creating horizontal scroll. */
@media (max-width: 760px){
  .practice-card,.trainer-card,.game-card,.quiz-card,.main-card{
    width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important;
    padding:clamp(22px,6vw,34px)!important;border-radius:30px!important;min-height:auto!important;
  }
  .practice-card h1,.trainer-card h1,.game-card h1,.quiz-card h1,.main-card h1{
    font-size:clamp(2.3rem,11vw,4rem)!important;line-height:1.02!important;
  }
  .score-row,.stats-row,.session-stats,.score-pills,.session-metrics{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;width:100%!important;max-width:100%!important;
  }
  .score-pill,.stat-pill,.metric-pill,.session-stat,.session-metric{
    width:100%!important;min-width:0!important;height:auto!important;min-height:50px!important;padding:10px 12px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;white-space:normal!important;line-height:1.15!important;
  }
  .kana-display,.prompt,.question,.kana-big{font-size:clamp(5rem,30vw,9rem)!important;line-height:1!important;}
  input[type="text"],input[type="search"],textarea{font-size:16px!important;max-width:100%!important;}
  .modifier-toggle,.modifiers-toggle,#modifierToggle,.modifiers-header{
    width:100%!important;left:auto!important;right:auto!important;max-width:100%!important;overflow:hidden!important;
  }
  body{overflow-x:hidden!important;}
}

/* Results/stat pages: compact cards on phones so the first screen shows useful content. */
@media (max-width: 760px){
  .ma-compact-results,.ma-compact-insight-grid,.ma-kana-stat-grid,.stats-grid,.metric-grid,.results-grid{
    grid-template-columns:1fr!important;gap:12px!important;
  }
  .ma-compact-results > *, .ma-compact-insight-grid > *, .ma-kana-stat, .stat-card, .metric-card{
    min-height:auto!important;padding:18px!important;border-radius:24px!important;
  }
  .ma-compact-results .value,.stat-card .value,.metric-card .value{font-size:clamp(2.4rem,12vw,3.6rem)!important;line-height:1!important;}
  .result-hero,.results-hero,.overall-snapshot,.snapshot-card{padding:22px!important;border-radius:28px!important;}
}

/* iPad portrait/tablet: avoid cramped nav while keeping desktop-style cards. */
@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait){
  body{padding-left:22px!important;padding-right:22px!important;}
  .topbar,.branch-nav,.study-nav{width:100%!important;max-width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:14px!important;padding:16px!important;}
  .branch-links,.study-links,.nav{width:100%!important;display:flex!important;overflow-x:auto!important;gap:10px!important;scrollbar-width:none!important;}
  .branch-links::-webkit-scrollbar,.study-links::-webkit-scrollbar,.nav::-webkit-scrollbar{display:none!important;}
  .branch-link,.study-link,.nav-link{flex:0 0 auto!important;}
  .profile-trigger,.study-nav-btn.profile-trigger{margin-left:auto!important;}
}


html, body {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: auto !important;
}
body {
  position: relative !important;
}
.app-shell, .shell, .wrap, main, .page, .page-shell {
  height: auto !important;
  max-height: none !important;
}
@media (min-width: 761px) {
  html, body {
    overflow-y: auto !important;
  }
  .topbar, .branch-nav, .study-nav {
    max-width: calc(100vw - 48px);
  }
}


* { box-sizing: border-box; }
@media (max-width: 760px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Keep the nav as a real card with brand/profile on row one and links below. */
  .branch-nav,
  .study-nav,
  .topbar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 14px !important;
    border-radius: 26px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
    overflow: hidden !important;
    align-items: center !important;
  }

  .branch-brand,
  .study-brand,
  .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    max-width: calc(100vw - 150px) !important;
    overflow: hidden !important;
  }

  .branch-name,
  .study-title,
  .brand-name {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.1 !important;
  }

  .branch-mark,
  .study-mark,
  .brand-mark,
  .logo-mark {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 17px !important;
  }

  /* Phone links should not be hidden behind the profile avatar or clipped off-screen. */
  .branch-links,
  .study-links,
  .nav {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .branch-link,
  .study-link,
  .nav-link {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1 !important;
  }

  /* Profile stays in the top-right row only. */
  .branch-links > .profile-trigger,
  .nav > .profile-trigger,
  .topbar > .profile-trigger,
  .study-nav-btn.profile-trigger,
  #profileOpenBtn,
  #studyProfileBtn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    z-index: 6 !important;
  }

  .profile-trigger > span:not(.profile-dot),
  .study-nav-btn.profile-trigger > span:not(.profile-dot),
  #profileOpenBtn > span:not(.profile-dot),
  #studyProfileBtn > span:not(.profile-dot) {
    display: none !important;
  }

  .profile-dot,
  #topProfileDot,
  #profileDot,
  #studyTopProfileDot {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
  }

  .study-nav-actions { display: contents !important; }
  #studyNavHideBtn,
  .study-nav-btn.hide {
    display: none !important;
  }

  /* Avoid the bottom modifier control creating sideways page scroll. */
  .bottom-shell,
  .modifiers-shell,
  .modifier-panel,
  .bottom-shell.ma-modifiers-only {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 420px) {
  .branch-link,
  .study-link,
  .nav-link {
    font-size: 14px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .branch-brand,
  .study-brand,
  .brand {
    max-width: calc(100vw - 136px) !important;
  }
}

.score-pill[hidden],
.stat-pill[hidden],
.metric-pill[hidden],
.session-stat[hidden],
.session-metric[hidden],
.score-pill[style*="display: none"],
.score-pill[style*="display:none"],
.stat-pill[style*="display: none"],
.stat-pill[style*="display:none"],
.metric-pill[style*="display: none"],
.metric-pill[style*="display:none"],
.session-stat[style*="display: none"],
.session-stat[style*="display:none"],
.session-metric[style*="display: none"],
.session-metric[style*="display:none"],
#endlessWrongPill[style*="display: none"],
#endlessWrongPill[style*="display:none"],
#dailyProgressPill[style*="display: none"],
#dailyProgressPill[style*="display:none"],
#testQuestionPill[style*="display: none"],
#testQuestionPill[style*="display:none"],
#correctPill[style*="display: none"],
#correctPill[style*="display:none"],
#wrongPill[style*="display: none"],
#wrongPill[style*="display:none"] {
  display: none !important;
}

@media (max-width: 760px) {
  .scoreline,
  .score-row,
  .stats-row,
  .session-stats,
  .score-pills,
  .session-metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .score-pill:not([style*="display: none"]):not([style*="display:none"]),
  .stat-pill:not([style*="display: none"]):not([style*="display:none"]),
  .metric-pill:not([style*="display: none"]):not([style*="display:none"]) {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
}

@media (max-width: 760px), (max-width: 900px) and (orientation: portrait) {
  .topbar,
  .branch-nav,
  .study-nav {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    margin: 10px auto 14px !important;
    padding: 10px !important;
    border-radius: 22px !important;
    gap: 8px 9px !important;
    min-height: 0 !important;
  }

  .brand,
  .branch-brand,
  .study-brand {
    gap: 9px !important;
    max-width: calc(100vw - 116px) !important;
  }

  .brand-mark,
  .branch-mark,
  .study-mark {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 15px !important;
    font-size: 1.05rem !important;
  }

  .brand-name,
  .branch-name,
  .study-title {
    font-size: clamp(0.98rem, 4.3vw, 1.2rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
  }

  .nav,
  .branch-links,
  .study-links {
    gap: 6px !important;
    padding: 1px 0 0 !important;
    margin-top: 2px !important;
  }

  .nav-link,
  .branch-link,
  .study-link,
  .study-nav-btn.hide {
    height: 36px !important;
    min-height: 36px !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    border-radius: 999px !important;
    font-size: clamp(0.78rem, 3.2vw, 0.92rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
  }

  .profile-trigger,
  .branch-links > .profile-trigger,
  .nav > .profile-trigger,
  .study-nav-btn.profile-trigger,
  #profileOpenBtn,
  #studyProfileBtn {
    top: 10px !important;
    right: 10px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    padding: 0 !important;
  }

  .profile-dot,
  #topProfileDot,
  #profileDot,
  #studyTopProfileDot {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }
}

@media (max-width: 430px) {
  .topbar,
  .branch-nav,
  .study-nav {
    width: calc(100vw - 22px) !important;
    max-width: calc(100vw - 22px) !important;
    padding: 9px !important;
    border-radius: 20px !important;
  }

  .nav-link,
  .branch-link,
  .study-link,
  .study-nav-btn.hide {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 0.78rem !important;
  }

  .brand-mark,
  .branch-mark,
  .study-mark {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 14px !important;
  }

  .profile-trigger,
  .branch-links > .profile-trigger,
  .nav > .profile-trigger,
  .study-nav-btn.profile-trigger,
  #profileOpenBtn,
  #studyProfileBtn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }

  .profile-dot,
  #topProfileDot,
  #profileDot,
  #studyTopProfileDot {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
}