.nav-label-mobile,
.login-label-mobile { display: none; }

@media (max-width: 900px) {
  html {
    width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-gutter: auto;
  }

  body {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  img, svg, video, canvas { max-width: 100%; }
  input, select, textarea, button { font-size: 16px; }
  button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

  .app-wrap,
  .container {
    width: min(94vw, 1160px) !important;
    max-width: 100% !important;
  }

  /* ------------------------------------------------------------------
     Public child header: fixed two-row mobile layout.
     Authenticated child chrome is owned by child-chrome.css.
     ------------------------------------------------------------------ */
  header.public-child-header {
    min-height: 118px;
    height: auto;
    padding-top: env(safe-area-inset-top);
    background: rgba(255,255,255,.99);
    backdrop-filter: blur(14px);
  }

  header.public-child-header > .child-product-nav {
    width: 100%;
    max-width: none;
    height: 118px;
    min-height: 118px;
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas:
      'brand actions'
      'nav nav';
    grid-template-rows: 62px 56px;
    align-items: center;
    gap: 0 10px;
  }

  header.public-child-header .child-product-brand {
    grid-area: brand;
    width: auto;
    max-width: calc(100vw - 172px);
    height: 62px;
    gap: 8px;
    overflow: hidden;
  }

  header.public-child-header .child-product-brand img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }

  header.public-child-header .child-brand-name {
    min-width: 0;
    max-width: 100%;
    font-size: 21px;
    line-height: 1.05;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  header.public-child-header .child-header-actions {
    grid-area: actions;
    width: auto;
    height: 62px;
    justify-self: end;
  }

  header.public-child-header .child-help-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 14px;
  }
  header.public-child-header .child-help-button span { display: none; }
  header.public-child-header .child-help-button i { font-size: 17px; }

  header.public-child-header .child-sign-out-button {
    width: 46px;
    min-width: 46px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 14px;
  }

  header.public-child-header .child-sign-out-button span { display: none; }
  header.public-child-header .child-sign-out-button i { font-size: 17px; }

  header.public-child-header .child-product-links {
    grid-area: nav;
    width: 100%;
    max-width: none;
    height: 56px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    align-items: stretch;
    justify-self: stretch;
    gap: 3px;
    overflow: visible;
    padding: 2px 0 4px;
  }

  header.public-child-header .child-nav-tab {
    width: 100%;
    min-width: 0;
    height: 50px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 4px 2px 7px;
    border-radius: 11px;
    font-size: 10px;
    line-height: 1;
    text-align: center;
    overflow: hidden;
  }

  header.public-child-header .child-nav-tab i { font-size: 18px; }
  header.public-child-header .child-nav-tab::after {
    left: 18%;
    right: 18%;
    height: 3px;
  }

  .nav-label-full { display: none; }
  .nav-label-mobile { display: inline; }
  header.public-child-header > .child-product-nav {
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas:
      'brand actions'
      'nav nav';
    grid-template-rows: 62px 56px;
  }

  header.public-child-header .child-product-brand {
    width: auto;
    max-width: calc(100vw - 126px);
  }

  header.public-child-header .child-brand-name {
    width: auto;
    max-width: 100%;
    font-size: 19px;
  }

  header.public-child-header .child-product-links {
    grid-template-columns: repeat(3,minmax(0,1fr));
    display: grid;
  }

  header.public-child-header .public-login-actions {
    width: auto;
    height: 62px;
  }

  header.public-child-header .public-login-tabs {
    width: 108px;
    height: 44px;
    border-radius: 14px;
  }

  header.public-child-header .public-login-tab {
    width: 52px;
    min-width: 0;
    padding: 0;
    font-size: 10px;
    gap: 3px;
    flex-direction: column;
  }

  header.public-child-header .public-login-tab i { font-size: 15px; }
  .login-label-full { display: none; }
  .login-label-mobile { display: inline; }

  /* ------------------------------------------------------------------
     Gem/progress strip. Previous grid left Help in an implicit third
     column on phones, causing horizontal overflow.
     ------------------------------------------------------------------ */
  .child-progress-strip-inner {
    width: 100%;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 9px max(10px,env(safe-area-inset-right)) 10px max(10px,env(safe-area-inset-left));
  }

  .child-earned-summary { grid-column: 1; }
  .child-progress-metric {
    min-width: 0;
    gap: 8px;
    padding: 7px 9px 9px;
  }

  .metric-gem {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    border-radius: 12px;
    font-size: 18px;
  }

  .child-progress-metric strong { font-size: 20px; }
  .child-progress-metric small {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.15;
  }

  .child-level-progress {
    grid-column: 1;
    grid-row: auto;
    padding: 10px 12px;
    border-radius: 16px;
  }

  .child-level-progress-copy {
    gap: 8px;
    margin-bottom: 7px;
  }
  .child-level-progress-copy strong { font-size: 13px; }
  .child-level-progress-copy small {
    max-width: 70%;
    font-size: 9px;
    line-height: 1.2;
  }


  /* ------------------------------------------------------------------
     Child dashboard
     ------------------------------------------------------------------ */
  .child-dashboard-main { padding-top: 14px; }
  .child-dashboard-main > .app-wrap { width: 94vw; }
  .child-dashboard-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 25px 20px 28px;
    border-radius: 24px;
  }
  .child-dashboard-hero::after { font-size: 24px; letter-spacing: 7px; }
  .child-dashboard-hero .app-title { font-size: clamp(34px,10vw,46px) !important; }
  .child-dashboard-hero-copy > p { font-size: 14px; line-height: 1.6; }
  .child-dashboard-hero .app-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 9px !important; }
  .child-dashboard-hero .app-button { width: 100% !important; min-height: 46px !important; }
  .next-unlock-card { padding: 18px; border-radius: 20px; }

  .child-stats-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 7px;
    margin: -18px 8px 0;
  }
  .child-stat-card {
    min-width: 0;
    min-height: 112px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    border-radius: 18px;
  }
  .child-stat-card:last-child { grid-column: auto; }
  .child-stat-icon { width: 38px; height: 38px; font-size: 19px; }
  .child-stat-card strong { font-size: 24px; }
  .child-stat-card span { font-size: 9px; line-height: 1.2; }

  .child-mission-banner {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 13px;
    margin: 24px 0 18px;
    padding: 18px;
    border-radius: 20px;
  }
  .child-mission-gem { width: 46px; height: 46px; font-size: 23px; border-radius: 15px; }
  .child-mission-banner h2 { font-size: 19px; line-height: 1.25; }
  .child-mission-banner p { font-size: 13px; line-height: 1.55; }

  .collection-card { margin-top: 28px; padding: 19px; gap: 16px; }
  .collection-card h2 { font-size: 23px; }

  .dashboard-activity-section { padding-top: 24px; }
  .dashboard-activity-heading h2 { font-size: 30px; line-height: 1.15; }
  .dashboard-activity-heading p { font-size: 14px; }
  .dashboard-suggestion-card {
    grid-template-columns: auto minmax(0,1fr);
    gap: 13px;
    padding: 17px;
    border-radius: 20px;
  }
  .dashboard-suggestion-icon { width: 48px; height: 48px; font-size: 25px; border-radius: 15px; }
  .dashboard-suggestion-copy h3 { font-size: 19px; }
  .dashboard-suggestion-copy p { font-size: 12px; }
  .dashboard-suggestion-button { grid-column: 1 / -1; width: 100%; min-height: 44px; }

  .dashboard-room-grid { grid-template-columns: 1fr; gap: 13px; }
  .dashboard-activity-section .room-card.room-card-light { min-height: 180px; padding: 18px; border-radius: 20px; }
  .room-card-top { margin-bottom: 16px; }
  .dashboard-activity-section .room-card.room-card-light h3 { font-size: 23px; }
  .dashboard-activity-section .room-card.room-card-light p { margin-bottom: 13px; font-size: 13px; }
  .dashboard-recent-activity { margin-top: 22px; margin-bottom: 30px; padding: 18px; }

  /* ------------------------------------------------------------------
     Palace: one-column workspace, mobile-friendly canvas and swipeable
     room/treasure collections. Touching empty canvas still scrolls page;
     touching a placed object drags the object.
     ------------------------------------------------------------------ */
  .shop-balance {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: auto auto 1fr;
    justify-content: start;
    justify-items: start;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    text-align: left;
  }
  .shop-balance strong { font-size: 29px; }
  .shop-balance-copy { align-self: center; }

  /* ------------------------------------------------------------------
     Activity rooms: compact, usable content instead of desktop cards
     squeezed into a phone viewport.
     ------------------------------------------------------------------ */
  body.child-room-page main { padding-bottom: 46px; }
  body.child-room-page .container { width: 94vw !important; }
  body.child-room-page section { padding-top: 22px; padding-bottom: 22px; }
  body.child-room-page .hero-section { padding: 28px 0 24px; }
  body.child-room-page .hero-section::before { font-size: 24px; top: 12px; letter-spacing: 5px; }
  body.child-room-page .hero-grid { grid-template-columns: 1fr; gap: 18px; }
  body.child-room-page .hero-title { font-size: clamp(34px,10vw,44px); line-height: 1.1; }
  body.child-room-page .hero-path-list { gap: 10px; }
  body.child-room-page .hero-path-item { padding: 13px 14px; border-radius: 16px; }

  body.child-room-page .card,
  body.child-room-page .glow-mood-shell,
  body.child-room-page .growth-quick-card,
  body.child-room-page .confidence-studio-shell,
  body.child-room-page .challenge-builder-card {
    padding: 18px !important;
    border-radius: 20px !important;
  }
  body.child-room-page .card { margin-bottom: 22px !important; }
  body.child-room-page .card h2 { font-size: 23px !important; line-height: 1.2 !important; }
  body.child-room-page .card h3 { font-size: 19px !important; }
  body.child-room-page .card p { font-size: 14px !important; line-height: 1.55 !important; }

  body.child-room-page .glow-mood-block { padding: 12px 0; margin-bottom: 18px; }
  body.child-room-page .glow-mood-head h3 { font-size: 22px; }
  body.child-room-page .glow-mood-head p { font-size: 14px; }
  body.child-room-page .glow-mood-row {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin: 14px 0;
    padding: 0;
  }
  body.child-room-page .glow-mood-item {
    min-height: 132px;
    gap: 7px;
    padding: 14px 8px;
    border-width: 2px;
    border-radius: 16px;
  }
  body.child-room-page .glow-mood-emoji { font-size: 36px; }
  body.child-room-page .glow-mood-label { font-size: 14px; }
  body.child-room-page .glow-mood-relatable { font-size: 10px; line-height: 1.25; }

  body.child-room-page .glow-tasks-grid,
  body.child-room-page .inline-3col,
  body.child-room-page .inline-2col,
  body.child-room-page .gem-journey-grid,
  body.child-room-page .growth-choice-grid,
  body.child-room-page .confidence-studio-grid {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }
  body.child-room-page .glow-task-card { padding: 17px; border-width: 2px; border-radius: 17px; }
  body.child-room-page .glow-task-content h4 { font-size: 19px; }
  body.child-room-page .glow-task-content p { font-size: 14px; }
  body.child-room-page .glow-start-btn { min-height: 46px; font-size: 15px; }

  .growth-quick-start,
  .confidence-studio { width: 94vw; margin-top: 20px; }
  .growth-quick-heading { flex-direction: column; gap: 12px; }
  .growth-explored-pill { width: 100%; }
  .growth-recommendation { grid-template-columns: 1fr; text-align: left; padding: 16px; }
  .growth-recommendation-icon { margin: 0; }
  .growth-primary-button { width: 100%; }

  .challenge-builder-card { width: 94vw !important; margin: 0 auto 26px !important; }
  .challenge-builder-heading { margin-bottom: 16px; }
  .challenge-builder-heading h2 { font-size: 26px; }
  .challenge-builder-heading p { font-size: 14px; }
  .challenge-create-panel { padding: 14px; border-radius: 16px; }
  .challenge-create-grid { grid-template-columns: 1fr; gap: 9px; }
  .challenge-or { min-height: 22px; }
  .challenge-add-button { width: 100% !important; min-height: 46px !important; }
  .challenge-progress-card { padding: 14px; border-radius: 17px; }
  .challenge-card-header,
  .challenge-today-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .challenge-card-actions { width: 100%; }
  .challenge-action { flex: 1; min-height: 42px; }
  .challenge-today-button { width: 100%; min-height: 46px; }

  .challenge-tracker,
  .challenge-tracker-readonly {
    display: flex;
    grid-template-columns: none;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 14px;
    padding: 2px 4px 9px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .challenge-tracker::-webkit-scrollbar,
  .challenge-tracker-readonly::-webkit-scrollbar { display: none; }
  .challenge-day,
  .challenge-tracker-readonly .challenge-day {
    flex: 0 0 78px;
    min-width: 78px;
    min-height: 92px;
    padding: 10px 6px;
    scroll-snap-align: start;
  }

  .sound-library-grid { grid-template-columns: 1fr !important; gap: 10px !important; }

  .timer-modal,
  .roulette-modal,
  .contact-modal { padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); }
  .timer-content,
  .roulette-content,
  .contact-modal-content {
    width: 100%;
    max-width: 440px;
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 24px 18px 20px;
    border-radius: 20px;
  }
  .timer-display { font-size: 50px; margin: 16px 0; }

  .floating-sparkle-btn {
    left: 12px;
    bottom: max(12px,env(safe-area-inset-bottom));
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
  }
  .floating-sparkle-btn .fab-txt { display: none; }

  /* ------------------------------------------------------------------
     Parent dashboard and auth/account pages
     ------------------------------------------------------------------ */
  .dashboard-section-header { align-items: stretch; flex-direction: column; gap: 13px; }
  .dashboard-section-header .app-actions { width: 100% !important; }
  .dashboard-section-header .app-button { width: 100% !important; }

  .auth-shell {
    min-height: calc(100dvh - 118px);
    place-items: start center;
    padding: 18px 0 max(28px,env(safe-area-inset-bottom));
  }
  .auth-grid { width: 94vw; grid-template-columns: 1fr; border-radius: 22px; }
  .auth-story { display: none; }
  .auth-form { width: 94vw !important; max-width: 620px !important; padding: 24px 20px !important; border-radius: 22px !important; }
  .auth-logo { margin-bottom: 18px; font-size: 21px; }
  .auth-logo img { width: 50px; height: 50px; }
  .auth-title { font-size: 29px; }
  .auth-copy { font-size: 14px; }
  .app-field input,
  .app-field select,
  .app-field textarea { min-height: 48px; font-size: 16px; }
  .choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .avatar-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .modal-backdrop { padding: 10px; }
  .modal-card { width: 100%; max-height: 90dvh; padding: 20px 16px; border-radius: 20px; }

  /* ------------------------------------------------------------------
     Public/home/support pages
     ------------------------------------------------------------------ */
  body:not(.app-page):not(.child-room-page) .container { width: 92vw !important; }
  body:not(.app-page):not(.child-room-page) .hero-heading { font-size: clamp(38px,11vw,50px) !important; line-height: 1.08 !important; }
  body:not(.app-page):not(.child-room-page) section { padding-top: 30px; padding-bottom: 30px; }
  body:not(.app-page):not(.child-room-page) .card { padding: 20px !important; border-radius: 20px !important; }
  body:not(.app-page):not(.child-room-page) .how-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  body:not(.app-page):not(.child-room-page) .why-grid,
  body:not(.app-page):not(.child-room-page) .insight-cards,
  body:not(.app-page):not(.child-room-page) .sound-lounge-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  body:not(.app-page):not(.child-room-page) .treasures-showcase {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: stretch !important;
  }
  body:not(.app-page):not(.child-room-page) .treasure-item { width: 100% !important; max-width: none !important; }
  body:not(.app-page):not(.child-room-page) .treasure-emoji { font-size: 66px; animation-duration: 1.4s; }
  body:not(.app-page):not(.child-room-page) .cta-btn { width: min(100%,340px) !important; justify-content: center !important; }
  body:not(.app-page):not(.child-room-page) footer { margin-top: 45px; padding: 40px 0 max(34px,env(safe-area-inset-bottom)); }
  body:not(.app-page):not(.child-room-page) .footer-grid { grid-template-columns: 1fr; gap: 24px; }

  .dashboard-tab,
  .gem-counter { display: none !important; }
  .back-to-top { right: 14px; bottom: max(14px,env(safe-area-inset-bottom)); width: 44px; height: 44px; }

  /* PWA prompt cannot cover important mobile actions. */
  .pwa-install-banner {
    left: 10px;
    right: 10px;
    bottom: max(10px,env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    border-radius: 17px;
  }
}

@media (max-width: 480px) {
  .app-wrap,
  .container { width: 94vw !important; }

  header.public-child-header .child-brand-name { font-size: 19px; }
  header.public-child-header .child-brand-name { font-size: 17px; }
  header.public-child-header .child-nav-tab { font-size: 9px; }
  header.public-child-header .child-nav-tab i { font-size: 17px; }

  .child-progress-metric small { font-size: 8.5px; }
  .child-level-progress-copy small { max-width: 62%; }

  .child-dashboard-hero { padding-inline: 18px; }
  .child-stats-grid { margin-inline: 5px; }
  .child-stat-card { min-height: 106px; padding-inline: 5px; }

  body.child-room-page .glow-mood-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .challenge-day,
  .challenge-tracker-readonly .challenge-day { flex-basis: 74px; min-width: 74px; }
  .choice-grid { grid-template-columns: 1fr; }

  body:not(.app-page):not(.child-room-page) .how-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .treasure-emoji,
  .nav-link i.fa-gem,
  .sparkle,
  .gem-icon { animation: none !important; }
}

@media (max-width: 760px) {
  .child-progress-help-slot { grid-column: 1 / -1; justify-content: flex-end; }
  .child-strip-help { min-height: 46px; padding: 0 18px; font-size: 14px; }
}