/*
 * STARNAVI mobile H5
 * Only active on /mobile/. The desktop experience is intentionally untouched.
 */
@media (max-width: 820px) {
  html.mobile-h5 {
    color-scheme: dark;
    min-width: 320px;
    background: #031027;
    -webkit-text-size-adjust: 100%;
  }

  html.mobile-h5 body {
    min-width: 320px;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    overscroll-behavior-y: contain;
    background:
      radial-gradient(circle at 18% 5%, rgba(28, 144, 255, .15), transparent 32%),
      radial-gradient(circle at 88% 30%, rgba(116, 73, 255, .12), transparent 36%),
      #031027;
  }

  html.mobile-h5 button,
  html.mobile-h5 a,
  html.mobile-h5 label { -webkit-tap-highlight-color: transparent; }
  html.mobile-h5 button { touch-action: manipulation; }
  html.mobile-h5 #fxCanvas { opacity: .38; }

  /* Compact app header: essential account state only. */
  html.mobile-h5 .top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    width: 100%;
    min-height: 56px;
    height: 56px;
    padding: 8px 12px;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap;
    gap: 8px;
    overflow: hidden;
    border-bottom-color: rgba(97, 182, 255, .18);
    border-radius: 0;
    background: rgba(3, 13, 35, .9);
    box-shadow: 0 8px 28px rgba(0, 5, 24, .3);
    backdrop-filter: blur(22px) saturate(145%);
  }

  html.mobile-h5 .top-navbar .brand-logo { flex: 0 0 auto; gap: 6px; }
  html.mobile-h5 .top-navbar .logo-icon { font-size: 25px; }
  html.mobile-h5 .top-navbar .logo-text {
    width: auto;
    max-width: 92px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .8px;
    white-space: nowrap;
  }
  html.mobile-h5 .top-navbar .logo-text::after { content: ''; }
  html.mobile-h5 .top-navbar .nav-right-controls {
    display: flex;
    flex: 1 1 auto;
    width: auto;
    justify-content: flex-end;
    gap: 5px;
    min-width: 0;
    overflow: visible;
    padding: 0;
  }
  html.mobile-h5 .top-navbar .nav-pill {
    min-width: 0;
    min-height: 36px;
    padding: 6px 9px;
    gap: 4px;
    border-radius: 12px;
    font-size: 12px;
  }
  html.mobile-h5 .top-navbar .nav-pill > span:last-child { display: none; }
  html.mobile-h5 .top-navbar .pill-add-btn { width: 19px; height: 19px; }
  html.mobile-h5 .top-navbar .nav-btn-action {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    font-size: 0;
  }
  html.mobile-h5 .top-navbar .nav-btn-action > span:first-child { font-size: 15px; }
  html.mobile-h5 .top-navbar .btn-settings { display: none; }
  html.mobile-h5 .top-navbar #btnOpenProfile,
  html.mobile-h5 .top-navbar #userStateArea { display: none !important; }

  html.mobile-h5 .main-view-container { padding: 68px 12px calc(82px + env(safe-area-inset-bottom)); }
  html.mobile-h5 .starnavi-home-layout { display: block; max-width: 520px; margin: 0 auto; }
  html.mobile-h5 .mobile-home-panel { display: none; width: 100%; animation: mobile-panel-in .22s ease both; }
  html.mobile-h5 .mobile-home-panel.active { display: block; }
  html.mobile-h5 .mobile-home-panel[hidden] { display: none !important; }
  html.mobile-h5 .mobile-section-intro {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 2px 1px 14px;
    padding: 13px 14px;
    border: 1px solid rgba(92, 191, 255, .2);
    border-radius: 17px;
    background: linear-gradient(130deg, rgba(27, 91, 170, .32), rgba(73, 45, 157, .22));
  }
  html.mobile-h5 .mobile-section-intro > span { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border-radius: 13px; background: rgba(50, 170, 255, .16); font-size: 22px; }
  html.mobile-h5 .mobile-section-intro h2 { margin: 0; color: #f2f8ff; font-size: 18px; line-height: 1.25; }
  html.mobile-h5 .mobile-section-intro p { margin: 4px 0 0; color: #8fa9cc; font-size: 10px; line-height: 1.45; }
  html.mobile-h5 [data-mobile-panel="challenge"] > .mobile-section-intro { display: none; }
  html.mobile-h5 [data-mobile-panel="missions"] > .mobile-section-intro { display: none; }
  html.mobile-h5 .home-center-hub { order: 1; width: 100%; }
  html.mobile-h5 .home-right-sidebar { order: 2; display: flex; flex-direction: column; width: 100%; gap: 12px; }
  html.mobile-h5 .home-left-sidebar { order: 3; display: flex; flex-direction: column; width: 100%; gap: 12px; }
  html.mobile-h5 .glass-card { margin: 0; padding: 15px; border-radius: 18px; }
  html.mobile-h5 .card-section-header { margin-bottom: 11px; }
  html.mobile-h5 .card-title { font-size: 16px; }

  /* Home hierarchy: play first, then personal information and supporting content. */
  html.mobile-h5 .hero-title-banner { padding: 2px 4px 9px; text-align: center; }
  html.mobile-h5 .main-hero-title { margin: 0; font-size: clamp(20px, 5.8vw, 25px); line-height: 1.15; }
  html.mobile-h5 .main-hero-desc { margin-top: 5px; font-size: 10px; line-height: 1.4; }
  html.mobile-h5 .main-hero-cards-row { display: grid; grid-template-columns: 1fr !important; gap: 8px; }
  html.mobile-h5 .hero-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 0;
    min-height: 198px;
    padding: 9px 12px;
    border-radius: 19px;
    justify-content: center !important;
    text-align: center;
  }
  html.mobile-h5 .hero-card-tag-icon { top: 10px; left: 11px; font-size: 13px; }
  html.mobile-h5 .hero-card-visual { display: grid; width: 100%; min-height: 53px; flex: 0 0 auto; place-items: center; margin: 0 auto 3px; }
  html.mobile-h5 .hero-mascot-icon { font-size: 48px; }
  html.mobile-h5 .hero-card-text { width: 100%; margin: 0 auto 7px; text-align: center !important; }
  html.mobile-h5 .hero-card-title { font-size: 20px; line-height: 1.15; }
  html.mobile-h5 .hero-card-desc { min-height: 0; margin-top: 3px; font-size: 9px; line-height: 1.35; }
  html.mobile-h5 .hero-card-btn { width: min(100%, 250px); min-height: 38px; margin-inline: auto; padding: 7px 5px; border-radius: 13px; font-size: 12px; }
  html.mobile-h5 .hero-card-sub-action { align-self: center !important; margin: 5px auto 0; font-size: 8px; line-height: 1.25; text-align: center; }

  html.mobile-h5 .home-backpack-panel { margin-top: 0; }
  html.mobile-h5 .home-backpack-heading { align-items: center; }
  html.mobile-h5 .home-backpack-heading strong { font-size: 15px; }
  html.mobile-h5 .home-backpack-heading small { display: none; }
  html.mobile-h5 .home-backpack-items {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }
  html.mobile-h5 .home-backpack-items .home-prop-item {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 82px;
    padding: 10px 5px;
    border-color: rgba(93, 164, 255, .22);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(12, 43, 91, .82), rgba(5, 23, 58, .76));
    text-align: center;
  }
  html.mobile-h5 .home-backpack-items .home-prop-item:nth-child(4) { grid-column: 2 / span 2; }
  html.mobile-h5 .home-backpack-items .home-prop-item:nth-child(5) { grid-column: 4 / span 2; }
  html.mobile-h5 .home-backpack-items .home-prop-item > span {
    font-size: 25px;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(1, 8, 25, .34));
  }
  html.mobile-h5 .home-backpack-items .home-prop-item > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 0;
  }
  html.mobile-h5 .home-backpack-items .home-prop-item strong {
    font-size: 15px;
    line-height: 1.1;
  }
  html.mobile-h5 .home-backpack-items .home-prop-item small {
    max-width: 100%;
    color: #aec2e6;
    font-size: 9px;
    line-height: 1.25;
  }
  html.mobile-h5 .student-stats-trio { padding: 12px 4px; }
  html.mobile-h5 .knowledge-strength-list { gap: 8px; }
  html.mobile-h5 .leaderboard-card { order: 2; }
  html.mobile-h5 .task-center-card { order: 1; }
  html.mobile-h5 .star-chest-card { order: 2; }
  html.mobile-h5 .home-achievement-panel { order: 3; }
  html.mobile-h5 .rocket-decoration-box { display: none; }
  html.mobile-h5 .task-items-list { gap: 7px; }
  html.mobile-h5 .task-item { min-height: 58px; padding: 8px; }
  html.mobile-h5 .task-action-btn { min-width: 74px; min-height: 38px; padding: 6px 8px; }
  html.mobile-h5 .rank-user-row { min-height: 46px; }
  html.mobile-h5 .mobile-home-panel > .glass-card + .glass-card { margin-top: 12px; }
  html.mobile-h5 .mobile-primary-nav {
    position: fixed;
    z-index: 88;
    left: 10px;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 500px;
    min-height: 64px;
    margin: 0 auto;
    padding: 5px;
    border: 1px solid rgba(82, 167, 255, .3);
    border-radius: 21px;
    background: rgba(3, 16, 44, .94);
    box-shadow: 0 14px 45px rgba(0, 2, 15, .65), inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(24px) saturate(155%);
  }
  html.mobile-h5 .mobile-primary-nav button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 52px;
    padding: 4px 2px;
    border: 0;
    border-radius: 16px;
    color: #758fb4;
    background: transparent;
    cursor: pointer;
  }
  html.mobile-h5 .mobile-primary-nav button > span { font-size: 19px; line-height: 1; filter: grayscale(.45); }
  html.mobile-h5 .mobile-primary-nav button > b { margin-top: 5px; overflow: hidden; font-size: 9px; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
  html.mobile-h5 .mobile-primary-nav button.active { color: #b9f2ff; background: linear-gradient(145deg, rgba(31, 139, 239, .48), rgba(92, 70, 205, .42)); box-shadow: inset 0 0 0 1px rgba(91, 218, 255, .24); }
  html.mobile-h5 .mobile-primary-nav button.active > span { filter: none; transform: translateY(-1px); }
  html.mobile-h5 .mobile-primary-nav button.active::after { content: ''; position: absolute; bottom: 2px; width: 18px; height: 2px; border-radius: 9px; background: #52dfff; box-shadow: 0 0 9px #2fc9ff; }
  html.mobile-h5 .bottom-dock-nav {
    bottom: max(9px, env(safe-area-inset-bottom));
    width: calc(100vw - 20px);
    padding: 5px;
    border-radius: 19px;
  }
  html.mobile-h5 .dock-nav-item { min-height: 52px; font-size: 10px; }

  /* Battle: question and answers are primary; status follows below. */
  html.mobile-h5 .game-view-wrapper { width: 100%; }
  html.mobile-h5 #gameView:not(.hidden) { display: block; }
  html.mobile-h5 .game-view-wrapper .hud-container {
    position: sticky;
    top: 0;
    z-index: 75;
    margin: -14px -12px 10px;
  }
  html.mobile-h5 .hud-top-battle-bar {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    min-height: 0;
    padding: max(8px, env(safe-area-inset-top)) 12px 9px;
    gap: 7px 8px;
    background: rgba(3, 13, 35, .94);
    backdrop-filter: blur(20px);
  }
  html.mobile-h5 .hud-top-battle-bar .brand-logo { min-width: 0; }
  html.mobile-h5 .hud-top-battle-bar .logo-text { font-size: 13px; }
  html.mobile-h5 .hud-top-battle-bar .logo-icon { font-size: 22px; }
  html.mobile-h5 .hud-top-battle-bar .nav-right-controls { gap: 5px; }
  html.mobile-h5 .hud-top-battle-bar .nav-pill { min-height: 32px; padding: 5px 8px; font-size: 11px; }
  html.mobile-h5 .hud-top-battle-bar .nav-pill > span:last-child { display: none; }
  html.mobile-h5 .hud-top-battle-bar .nav-btn-action { width: 32px; min-width: 32px; min-height: 32px; padding: 0; font-size: 0; }
  html.mobile-h5 .hud-top-battle-bar .nav-btn-action span { font-size: 14px; }
  html.mobile-h5 .hud-center-title-capsule {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-height: 30px;
    padding: 6px 10px;
    overflow: hidden;
    border-radius: 10px;
    font-size: 11px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html.mobile-h5 .stage-main-canvas { padding: 0 0 142px; }
  html.mobile-h5 .battle-arena-layout { display: flex; flex-direction: column; max-width: 520px; gap: 10px; }
  html.mobile-h5 .battle-center-arena { order: 1; width: 100%; }
  html.mobile-h5 .battle-right-sidebar { order: 2; display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 9px; }
  html.mobile-h5 .battle-left-sidebar { order: 3; width: 100%; }
  html.mobile-h5 .question-progress-header-row { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-bottom: 9px; }
  html.mobile-h5 .q-index-capsule { min-width: 0; padding: 7px 9px; font-size: 10px; }
  html.mobile-h5 .knowledge-point-tag { font-size: 10px; }
  html.mobile-h5 .node-steps-chain { grid-column: 1 / -1; justify-content: center; min-height: 18px; overflow-x: auto; }
  html.mobile-h5 .step-circle { flex: 0 0 auto; width: 9px; height: 9px; }
  html.mobile-h5 .step-chain-line { flex: 0 0 12px; }
  html.mobile-h5 .battle-large-question-card { min-height: 145px; padding: 24px 18px; border-radius: 20px; }
  html.mobile-h5 .path-choice-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px;
    margin-bottom: 10px;
    padding: 9px;
    border-radius: 14px;
  }
  html.mobile-h5 .path-choice-label { grid-column: 1 / -1; font-size: 10px; }
  html.mobile-h5 .path-choice-strip button { min-width: 0; min-height: 58px; padding: 7px 5px; }
  html.mobile-h5 .path-choice-strip button strong { font-size: 11px; }
  html.mobile-h5 .path-choice-strip button span { font-size: 9px; }
  html.mobile-h5 .path-choice-strip button small { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  html.mobile-h5 .battle-question-text { font-size: clamp(18px, 5.2vw, 23px); line-height: 1.55; }
  html.mobile-h5 .vertical-options-list { gap: 9px; margin-top: 12px; }
  html.mobile-h5 .battle-opt-item { min-height: 58px; padding: 10px 13px; border-radius: 17px; }
  html.mobile-h5 .opt-alpha-badge { width: 34px; height: 34px; flex: 0 0 34px; }
  html.mobile-h5 .opt-label-text { padding-right: 5px; font-size: 14px; line-height: 1.45; }
  html.mobile-h5 .floating-astronaut-companion { display: none; }
  html.mobile-h5 .answer-feedback-panel { margin-top: 10px; }
  html.mobile-h5 .battle-health-card,
  html.mobile-h5 .battle-props-card { grid-column: 1 / -1; }
  html.mobile-h5 .current-status-mini-card,
  html.mobile-h5 .battle-combo-card { min-width: 0; padding: 12px; }
  html.mobile-h5 .battle-health-card { padding: 13px; }
  html.mobile-h5 .battle-props-card { padding: 13px; }
  html.mobile-h5 .battle-props-grid { gap: 7px; }
  html.mobile-h5 .battle-prop-btn { min-width: 0; min-height: 70px; padding: 8px 4px; }
  html.mobile-h5 .battle-progress-card { padding: 13px; }
  html.mobile-h5 .planet-orbit-vertical-track { max-height: 230px; }

  html.mobile-h5 .props-container {
    position: fixed;
    z-index: 90;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
  }
  html.mobile-h5 .battle-bottom-action-dock {
    display: grid;
    grid-template-columns: auto 1fr auto;
    width: 100%;
    padding: 9px 10px max(9px, env(safe-area-inset-bottom));
    gap: 7px;
    border-radius: 18px 18px 0 0;
    background: rgba(3, 14, 39, .96);
    box-shadow: 0 -12px 35px rgba(0, 4, 18, .5);
    backdrop-filter: blur(22px);
  }
  html.mobile-h5 .battle-timer-dock-wrap { grid-column: 1 / -1; grid-row: 1; width: 100%; min-width: 0; gap: 7px; }
  html.mobile-h5 .timer-lbl { display: none; }
  html.mobile-h5 .timer-track-bar { min-width: 70px; }
  html.mobile-h5 .timer-sec-val { min-width: 38px; font-size: 11px; }
  html.mobile-h5 .btn-battle-pause { min-width: 66px; min-height: 34px; }
  html.mobile-h5 .btn-return-galaxy,
  html.mobile-h5 .btn-next-question-glow { min-height: 44px; padding: 8px 13px; border-radius: 14px; font-size: 12px; }
  html.mobile-h5 .btn-return-galaxy { grid-column: 1; }
  html.mobile-h5 .btn-next-question-glow { grid-column: 3; min-width: 104px; }

  /* Compact mobile battle: keep question, answers, timer and survival state above the fold. */
  html.mobile-h5 .hud-top-battle-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: max(7px, env(safe-area-inset-top)) 10px 7px;
    gap: 7px;
  }
  html.mobile-h5 .hud-top-battle-bar .brand-logo,
  html.mobile-h5 .hud-top-battle-bar .pill-gold,
  html.mobile-h5 .hud-top-battle-bar #btnToggleSound,
  html.mobile-h5 .hud-top-battle-bar #btnBattleSettings { display: none; }
  html.mobile-h5 .hud-top-battle-bar .nav-right-controls { width: auto; gap: 5px; }
  html.mobile-h5 .hud-center-title-capsule {
    grid-column: 1;
    grid-row: 1;
    min-height: 32px;
    padding: 7px 9px;
    border-radius: 11px;
    font-size: 10px;
    text-align: left;
  }
  html.mobile-h5 .stage-main-canvas { padding-bottom: 72px; }
  html.mobile-h5 .battle-arena-layout { gap: 7px; }
  html.mobile-h5 .battle-left-sidebar { display: none; }
  html.mobile-h5 .battle-right-sidebar { display: block; }
  html.mobile-h5 .question-progress-header-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
  }
  html.mobile-h5 .q-index-capsule { padding: 6px 8px; font-size: 9px; white-space: nowrap; }
  html.mobile-h5 .node-steps-chain { display: none; }
  html.mobile-h5 .knowledge-point-tag { grid-column: 1 / -1; justify-self: end; margin-top: -3px; font-size: 9px; }
  html.mobile-h5 .mobile-battle-vitals {
    display: grid;
    grid-template-columns: auto minmax(42px, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid rgba(70, 202, 255, .24);
    border-radius: 11px;
    background: rgba(8, 38, 82, .72);
  }
  html.mobile-h5 .mobile-battle-vitals > span { color: #dff8ff; font-size: 9px; white-space: nowrap; }
  html.mobile-h5 .mobile-battle-vitals strong { color: #6ee7ff; font-size: 10px; }
  html.mobile-h5 .mobile-battle-vitals em { overflow: hidden; color: #9ec7df; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
  html.mobile-h5 .mobile-health-track { height: 5px; overflow: hidden; border-radius: 99px; background: rgba(117, 153, 202, .18); }
  html.mobile-h5 .mobile-health-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #22d3ee, #38bdf8); transition: width .25s ease; }
  html.mobile-h5 .mobile-battle-vitals.warning { border-color: rgba(255, 91, 117, .48); background: rgba(81, 24, 53, .62); }
  html.mobile-h5 .mobile-battle-vitals.warning strong,
  html.mobile-h5 .mobile-battle-vitals.warning em { color: #ffb4c0; }
  html.mobile-h5 .mobile-battle-vitals.warning .mobile-health-track i { background: linear-gradient(90deg, #ff496d, #ff8a9b); }
  html.mobile-h5 .battle-large-question-card { min-height: 108px; padding: 16px 14px; border-radius: 17px; }
  html.mobile-h5 .battle-question-text { font-size: clamp(16px, 4.6vw, 20px); line-height: 1.42; }
  html.mobile-h5 .vertical-options-list { gap: 6px; margin-top: 7px; }
  html.mobile-h5 .battle-opt-item { min-height: 48px; padding: 7px 10px; border-radius: 14px; }
  html.mobile-h5 .opt-alpha-badge { width: 30px; height: 30px; flex-basis: 30px; font-size: 12px; }
  html.mobile-h5 .opt-label-text { padding-right: 3px; font-size: 12px; line-height: 1.35; }
  html.mobile-h5 .path-choice-strip { gap: 6px; margin-bottom: 7px; padding: 7px; }
  html.mobile-h5 .path-choice-strip button { min-height: 46px; padding: 5px 4px; }
  html.mobile-h5 .path-choice-strip button small { display: none; }
  html.mobile-h5 .battle-health-card,
  html.mobile-h5 .current-status-mini-card,
  html.mobile-h5 .battle-combo-card { display: none; }
  html.mobile-h5 .battle-props-card { margin-top: 8px; padding: 10px; }
  html.mobile-h5 .battle-prop-btn { min-height: 56px; padding: 6px 4px; }
  html.mobile-h5 .battle-prop-icon { font-size: 18px; }
  html.mobile-h5 .battle-prop-name { font-size: 8px; }
  html.mobile-h5 .battle-system-notice { display: none; }
  html.mobile-h5 .battle-bottom-action-dock {
    grid-template-columns: 36px minmax(52px, 1fr) 31px 40px 76px;
    align-items: center;
    padding: 7px 9px max(7px, env(safe-area-inset-bottom));
    gap: 6px;
  }
  html.mobile-h5 .battle-timer-dock-wrap { display: contents; }
  html.mobile-h5 .timer-clock-icon,
  html.mobile-h5 .timer-lbl { display: none; }
  html.mobile-h5 .timer-sec-val { min-width: 31px; font-size: 9px; }
  html.mobile-h5 .btn-battle-pause { min-width: 40px; min-height: 38px; padding: 0; font-size: 0; }
  html.mobile-h5 .btn-battle-pause span { font-size: 13px; }
  html.mobile-h5 .btn-battle-pause b { display: none; }
  html.mobile-h5 .btn-return-galaxy,
  html.mobile-h5 .btn-next-question-glow { min-height: 40px; border-radius: 12px; font-size: 11px; }
  html.mobile-h5 .btn-return-galaxy { grid-column: 1; width: 36px; min-width: 36px; padding: 0; overflow: hidden; font-size: 0; }
  html.mobile-h5 .btn-return-galaxy span { font-size: 16px; }
  html.mobile-h5 .btn-next-question-glow { grid-column: 5; min-width: 76px; padding: 7px 8px; }

  /* All dialogs become thumb-friendly bottom sheets. */
  html.mobile-h5 .modal-backdrop,
  html.mobile-h5 .admin-modal-overlay,
  html.mobile-h5 .system-dialog-overlay { align-items: flex-end; padding: 0; }
  html.mobile-h5 .modal-box,
  html.mobile-h5 .admin-modal-box,
  html.mobile-h5 .system-dialog-card,
  html.mobile-h5 .result-dialog-card {
    width: 100% !important;
    max-width: none !important;
    max-height: 92dvh;
    margin: 0;
    padding: 18px 15px max(18px, env(safe-area-inset-bottom));
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
  }
  html.mobile-h5 .modal-header h2 { font-size: 18px; }
  html.mobile-h5 .wechat-auth-panel { padding: 18px 14px; border: 1px solid rgba(7,193,96,.38); border-radius: 18px; background: linear-gradient(145deg, rgba(7,193,96,.13), rgba(7,45,67,.52)); text-align: center; }
  html.mobile-h5 .wechat-auth-icon { display: grid; width: 54px; height: 54px; margin: 0 auto 10px; place-items: center; border-radius: 17px; color: #fff; background: #07c160; font-size: 13px; font-weight: 900; box-shadow: 0 8px 24px rgba(7,193,96,.25); }
  html.mobile-h5 .wechat-auth-panel h3 { margin: 0; color: #f2fff7; font-size: 18px; }
  html.mobile-h5 .wechat-auth-panel p { margin: 8px auto 13px; color: #a8c9ba; font-size: 11px; line-height: 1.6; }
  html.mobile-h5 .wechat-auth-panel small { display: block; margin-top: 9px; color: #719688; font-size: 9px; line-height: 1.5; }
  html.mobile-h5 .wechat-auth-btn { width: 100%; min-height: 46px; border: 0; border-radius: 14px; color: #fff; background: #07c160; font-size: 14px; font-weight: 800; cursor: pointer; }
  html.mobile-h5 #modalDailyQuest .checkin-grid {
    display: grid;
    grid-template-columns: repeat(7, 76px) !important;
    gap: 7px;
    width: max-content;
    max-width: 100%;
    padding: 2px 2px 7px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(77, 203, 255, .45) rgba(34, 66, 116, .22);
  }
  html.mobile-h5 #modalDailyQuest .checkin-day-card {
    display: grid;
    grid-template-rows: auto 28px minmax(24px, auto) auto;
    align-items: center;
    min-height: 108px;
    padding: 7px 4px;
    border-radius: 13px;
    scroll-snap-align: start;
  }
  html.mobile-h5 #modalDailyQuest .checkin-day-title { margin: 0; font-size: 9px; }
  html.mobile-h5 #modalDailyQuest .checkin-icon { margin: 0; font-size: 18px; }
  html.mobile-h5 #modalDailyQuest .checkin-reward { margin: 0; font-size: 8px; line-height: 1.3; }
  html.mobile-h5 #modalDailyQuest .checkin-status { min-height: 18px; font-size: 8px; }
  html.mobile-h5 #modalDailyQuest .btn-checkin-action { padding: 3px 5px; font-size: 8px; white-space: nowrap; }
  html.mobile-h5 .tier-cards-grid { grid-template-columns: 1fr; }
  html.mobile-h5 .free-explore-config-grid { grid-template-columns: 1fr; gap: 10px; }
  html.mobile-h5 .free-explore-category-options { grid-template-columns: 1fr 1fr; max-height: 210px; }
  html.mobile-h5 .free-explore-config-footer { align-items: stretch; flex-direction: column; }
  html.mobile-h5 .free-explore-config-footer > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
  html.mobile-h5 .result-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.mobile-h5 .result-actions { display: grid; grid-template-columns: 1fr; gap: 9px; }
  html.mobile-h5 input,
  html.mobile-h5 select,
  html.mobile-h5 textarea { font-size: 16px; }
}

@keyframes mobile-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 360px) {
  html.mobile-h5 .hero-card { min-height: 224px; }
  html.mobile-h5 .hero-card-visual { min-height: 65px; }
  html.mobile-h5 .top-navbar .logo-text { display: none; }
  html.mobile-h5 .free-explore-category-options { grid-template-columns: 1fr; }
}

@media (min-width: 821px) {
  html.mobile-h5 body::before {
    content: '请使用手机尺寸访问移动版';
    position: fixed;
    z-index: 9999;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    padding: 8px 14px;
    border: 1px solid rgba(92, 217, 255, .32);
    border-radius: 999px;
    color: #b8ecff;
    background: rgba(4, 20, 52, .9);
    font-size: 12px;
    pointer-events: none;
  }
}
html.mobile-h5 .mobile-account-settings-btn {
  width: 100%;
  min-height: 46px;
  margin: 12px 0 92px;
  border: 1px solid rgba(94, 234, 212, .3);
  border-radius: 14px;
  background: rgba(10, 42, 88, .92);
  color: #a5f3fc;
  font-weight: 700;
}
html.mobile-h5 .account-danger-zone { align-items: flex-start; flex-direction: column; }
html.mobile-h5 .account-danger-zone button { width: 100%; min-height: 42px; }