/* A complete mobile link hub within the safe viewport. Overflow remains reachable
   for text enlargement, landscape, and unusually small browser windows. */
@media (width < 860px) {
  .site-shell {
    width:min(100%,480px); max-width:none; height:100svh; min-height:470px;
    padding:env(safe-area-inset-top) max(18px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(18px,env(safe-area-inset-left));
    display:flex; flex-direction:column;
  }
  .site-header { height:56px; min-height:56px; flex-shrink:0; }
  .brand { min-height:44px; min-width:0; }
  .brand-symbol { width:30px; height:30px; flex:0 0 30px; border-radius:9px 9px 9px 3px; }
  .brand-symbol .icon { width:18px; height:18px; }
  .brand strong { font-size:clamp(13px,4vw,17px); letter-spacing:.025em; white-space:nowrap; }
  .brand small { font-size:6px; margin-top:3px; }
  .header-right { gap:4px; }
  .motion-toggle,.share-button { width:44px; height:44px; border-color:transparent; background:transparent; }
  .course-nav { padding-top:8px; flex-shrink:0; }
  .course-tabs { gap:5px; }
  .course-tab { min-height:44px; padding:5px 4px; font-size:11px; }
  .tab-number { display:none; }
  .main-grid { display:flex; flex:1 0 auto; flex-direction:column; padding:8px 0; gap:10px; }
  .intro { flex:1; display:flex; flex-direction:column; justify-content:center; min-height:0; }
  .intro-top { flex-shrink:0; }
  .eyebrow { font-size:7px; letter-spacing:.14em; }
  .hero-headline { margin-top:3px; font-size:23px; line-height:1.4; }
  .course-title-wrap { margin-top:0; }
  .course-title-wrap h1 { font-size:17px; line-height:1.5; letter-spacing:.03em; }
  .course-english,.intro-text { display:none; }
  .companion-art { --portrait-size:clamp(80px,calc(100svh - 622px),184px); flex:0 0 var(--portrait-size); width:230px; max-height:none; min-height:var(--portrait-size); height:var(--portrait-size); margin:32px auto 0; }
  .mascot-float { width:var(--portrait-size); height:var(--portrait-size); left:50%; top:50%; margin-left:calc(var(--portrait-size) / -2); margin-top:calc(var(--portrait-size) / -2); }
  .stage-glow { width:230px; height:var(--portrait-size); top:50%; margin-top:calc(var(--portrait-size) / -2); }
  .orbit-map { width:132px; height:132px; left:calc(50% - 66px); top:50%; margin-top:-66px; }
  .orbit-map-line { width:180px; left:-24px; }
  .orbital-ring { width:230px; height:49px; left:calc(50% - 115px); top:50%; margin-top:3px; }
  .orbit-satellite { width:188px; height:98px; left:calc(50% - 94px); top:50%; margin-top:-49px; }
  .small-moon { width:19px; height:19px; left:8%; top:29%; }
  .stage-spark-one { top:20%; right:12%; }
  .stage-spark-two { bottom:13%; left:18%; }
  .stage-coordinate { display:none; }
  .launch-ripple { inset:20% 30%; }
  .mascot-message { font-size:10px; min-height:16px; line-height:1.6; margin:0; flex-shrink:0; }
  .link-column { flex-shrink:0; margin:0; display:flex; flex-direction:column; gap:9px; }
  .app-card { border-radius:15px; padding:12px; }
  .section-kicker { display:none; }
  .app-card-copy { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .app-card h2 { font-size:15px; line-height:1.5; font-weight:500; }
  .app-card-copy p { display:none; }
  .store-links { margin-top:0; gap:8px; }
  .store-link { min-height:50px; padding:8px 10px; gap:8px; border-radius:9px; }
  .store-link strong { font-size:13px; }
  .store-link small { font-size:8px; margin-bottom:2px; }
  .store-link>.icon:first-child { width:20px; height:20px; }
  .store-link>.icon:last-of-type { display:none; }
  .web-app-link { margin-top:2px; min-height:44px; }
  .social-section { margin:0; }
  .section-heading h2 { font-size:12px; font-weight:500; }
  .section-heading>span { font-size:7px; }
  .section-caption { display:none; }
  .social-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:6px; }
  .social-link {
    position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); grid-template-rows:auto auto;
    gap:0 9px; align-content:center; min-height:52px; padding:6px 10px; border-radius:11px;
  }
  .social-icon { grid-row:1 / 3; width:28px; height:28px; border-radius:8px; }
  .social-icon .icon { width:17px; height:17px; }
  .social-copy { gap:0; grid-column:2; }
  .social-copy strong { font-size:12px; line-height:1.5; }
  .social-copy>span { display:none; }
  .pending-label { grid-column:2; margin:0; padding:0; border:0; font-size:9px; line-height:1.4; }
  .social-arrow { position:absolute; right:10px; width:13px; height:13px; }
  .social-link[href] .social-copy { grid-row:1 / 3; padding-right:9px; }
  .coaching-link { min-height:48px; padding:8px 12px; margin:0; border-radius:11px; gap:10px; }
  .coaching-link small { display:none; }
  .coaching-link strong { font-size:12px; }
  .coaching-icon .icon { width:20px; height:20px; }
  .link-note { display:none; }
  .site-footer { flex-shrink:0; align-items:center; gap:4px; min-height:26px; padding:5px 0; }
  .site-footer p { display:none; }
  .site-footer small { font-size:8px; }
  .site-footer>span { font-size:7px; }
  .planet-horizon { top:270px; opacity:.6; }
}

/* Keep the title, character and links in a single vertical flow at every height. */
@media (width < 860px) and (max-height:760px) {
  .site-shell { min-height:470px; padding-left:max(14px,env(safe-area-inset-left)); padding-right:max(14px,env(safe-area-inset-right)); }
  .site-header { height:50px; min-height:50px; }
  .course-nav { padding-top:4px; }
  .main-grid { padding:6px 0; gap:6px; }
  .intro { min-height:0; align-items:center; }
  .intro-top { text-align:center; }
  .eyebrow { justify-content:flex-start; font-size:6px; letter-spacing:.06em; gap:4px; }
  .eyebrow>span { display:none; }
  .hero-headline { font-size:23px; line-height:1.4; white-space:normal; margin-top:6px; }
  .hero-headline br { display:block; }
  .course-title-wrap { margin-top:0; }
  .course-title-wrap h1 { font-size:14px; line-height:1.5; letter-spacing:0; }
  .companion-art { --portrait-size:clamp(44px,calc(100svh - 548px),152px); flex:0 0 auto; width:min(210px,100%); height:var(--portrait-size); min-height:var(--portrait-size); max-height:none; margin-top:24px; }
  .mascot-float { width:var(--portrait-size); height:var(--portrait-size); margin-top:calc(var(--portrait-size) / -2); margin-left:calc(var(--portrait-size) / -2); }
  .stage-glow { width:min(230px,100%); height:var(--portrait-size); margin-top:calc(var(--portrait-size) / -2); }
  .orbit-map { width:105px; height:105px; margin-top:-53px; left:calc(50% - 53px); }
  .orbit-map-line { width:140px; left:-18px; }
  .orbital-ring { width:130px; height:35px; left:calc(50% - 65px); }
  .orbit-satellite { width:100px; height:70px; left:calc(50% - 50px); margin-top:-35px; }
  .small-moon { width:12px; height:12px; left:0; }
  .stage-spark-one { right:2%; top:14%; }
  .stage-spark-two { left:0; }
  .mascot-message { font-size:9px; margin-top:3px; }
  .link-column { gap:6px; }
  .app-card { padding:9px 10px; }
  .app-card h2 { font-size:14px; }
  .store-links { margin-top:0; }
  .store-link { min-height:46px; padding:6px 9px; }
  .social-list { gap:5px; margin-top:4px; }
  .social-link { min-height:46px; padding:5px 9px; }
  .coaching-link { min-height:44px; padding:6px 10px; }
  .site-footer { min-height:22px; padding:3px 0; }
}
@media (width < 860px) and (max-height:640px) {
  .section-heading { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .social-list { margin-top:0; }
  .hero-headline { font-size:19px; line-height:1.3; }
  .eyebrow { display:none; }
  .site-header { height:46px; min-height:46px; }
  .main-grid { padding:4px 0; gap:4px; }
  .intro { min-height:0; }
  .companion-art { --portrait-size:clamp(48px,calc(100svh - 466px),122px); width:min(190px,100%); margin-top:0; }
  .course-title-wrap h1 { font-size:13px; }
  .app-card { padding-top:6px; padding-bottom:6px; }
  .store-link,.social-link { min-height:44px; }
}
@media (max-width:359px) {
  .brand strong { font-size:13px; }
  .brand { gap:7px; }
  .course-tab { font-size:10px; }
  .course-title-wrap h1 { font-size:15px; }
  .social-link { column-gap:7px; }
  .social-copy strong { font-size:11px; }
}
@media (max-width:359px) and (max-height:760px) {
  .course-title-wrap h1 { font-size:13px; }
}

@media (min-width:600px) and (width < 860px) and (min-height:900px) {
  .site-shell { width:min(100%,640px); padding-left:32px; padding-right:32px; }
  .site-header { height:72px; min-height:72px; }
  .course-nav { padding-top:14px; }
  .course-tab { min-height:48px; font-size:12px; }
  .main-grid { padding:18px 0; gap:18px; }
  .course-title-wrap h1 { font-size:20px; }
  .companion-art { --portrait-size:clamp(114px,calc(100svh - 700px),224px); flex:0 0 var(--portrait-size); width:300px; min-height:var(--portrait-size); max-height:none; }
  .mascot-float { width:var(--portrait-size); height:var(--portrait-size); margin-left:calc(var(--portrait-size) / -2); margin-top:calc(var(--portrait-size) / -2); }
  .stage-glow { width:300px; height:calc(var(--portrait-size) + 4px); margin-top:calc((var(--portrait-size) + 4px) / -2); }
  .link-column { gap:12px; }
  .app-card { padding:16px; }
  .store-link { min-height:58px; }
  .social-link { min-height:62px; }
  .coaching-link { min-height:54px; }
  .site-footer { min-height:32px; }
}
@media(width < 860px) and (max-height:550px) {
  .site-shell { min-height:470px; }
  .intro-top { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .site-header { min-height:46px; height:46px; }
  .course-nav { padding-top:2px; }
  .main-grid { padding-block:3px; gap:3px; }
  .companion-art { --portrait-size:clamp(48px,calc(100svh - 432px),100px); width:130px; }
  .site-footer { min-height:16px; padding-block:1px; }
  .small-moon,.stage-spark { display:none; }
}
@media(width < 860px) and (640px < height <= 660px) {
  .companion-art { margin-top:20px; }
}