/* Phones and iPads. Dxtr was laid out for the 1280×800 landscape tablet and the TV; this file only adds rules inside
   media queries that neither of those matches (both are 1280 px wide or more, and landscape), so their look is
   untouched. Loaded last (index.html), so it wins over base/screens/learn/join at equal specificity.

     1. narrower than the tablet (iPad landscape 1024–1194, phones, upright iPads): no label under 11 px
     2. portrait up to 1199 px wide (iPad held upright, and phones): a bigger root size, screens that scroll
        instead of clipping, side-by-side columns stacked, the cqw screens (join, home, path, lesson, garden)
        re-sized in em so they follow the root size instead of the narrow width
     3. phones (up to 599 px wide): one column, the presenter bar on one row (steps scroll; js/app.js keeps the
        current step in view), the join stepper as dots, smaller mascots, touch targets of 44 px or more
     4. phones on their side: the screen scrolls rather than cutting off its bottom

   Why the root size changes here and not in js/app.js: the scale is CSS only (css/base.css, html font-size =
   clamp(11px, min(1.25vw, 2vh), 30px)). On a 393 px phone that is pinned at 11 px, and the cqw screens at
   1.3cqw ≈ 5 px. The overrides below are inside portrait/narrow queries, so 1280×800 and 1920×1080 keep the
   original formula exactly.
   Mascots are sized by Mascot.mount() with an inline style, so their sizes here need !important.
   Chrome/Edge 109 and Firefox 115: no :has(), no nesting, max()/min()/clamp() and aspect-ratio only. */

/* ───────────────────────── 1. narrower than the tablet: nothing smaller than 11 px ───────────────────────── */
@media (max-width:1279px){
  .eb{font-size:max(11px,.66rem)}
  .sm{font-size:max(11px,.82rem)}
  .chip{font-size:max(11px,.72rem)}
  .chip.sample,.chip.plan{font-size:max(11px,.6rem);letter-spacing:.06em}
  .tier{font-size:max(11px,.6rem);letter-spacing:.06em}
  .tile .l{font-size:max(11px,.58rem);letter-spacing:.08em}
  .bubble .via{font-size:max(11px,.58rem)}
  #steps button{font-size:max(11px,.72rem)}
  .brand small{font-size:max(11px,.6rem)}
  #steps button b{font-size:max(11px,.62rem)}
  .net{font-size:max(11px,.72rem)}
  .menu .g{font-size:max(11px,.6rem)}
  .menu button small{font-size:max(11px,.68rem)}
  #preview,#rehearsal{font-size:max(11px,.62rem)}
  .mxbar .lbl{font-size:max(11px,.74rem)}
  .mxbar .rep,.bigbtn small{font-size:max(11px,.7rem)}
  .lr .v,.skillrow .v,.hn,.hash{font-size:max(11px,.78rem)}
  .legend,.lstep b{font-size:max(11px,.7rem)}
  .lstep{font-size:max(11px,.78rem)}
  .th,.chat .day{font-size:max(11px,.66rem)}
  .chat .tm,.hc,.chart .l{font-size:max(11px,.62rem)}
  .node .cap{font-size:max(11px,.7rem)}
  .stone .lv,.tab8 .sm{font-size:max(11px,.74rem)}
  .paper .ph{font-size:max(11px,.6rem)}
  .paper .pn{font-size:max(11px,.62rem)}
  .paper .dtag{font-size:max(11px,.68rem)}
  .paper .cap,.paper.small p{font-size:max(11px,.78rem)}
  .wsbtn .wsp{font-size:max(11px,.62rem)}
  #sheet .note,#sheet .credits,#sheet label.f{font-size:max(11px,.76rem)}
  .bcard .bf,.bcard .bs,.scard .sv{font-size:max(11px,.66rem)}
  .bcard .bl,.scard .sm2,.scard .sb{font-size:max(11px,.72rem)}
  .gchip{font-size:max(11px,.78rem)}
}

/* ───────────────────────── 2. portrait: iPads held upright, and phones ───────────────────────── */
@media (max-width:1199px) and (orientation:portrait){
  html{font-size:clamp(14px,1.9vw,17px)}

  /* screens scroll down instead of clipping; their parts keep their natural height */
  .screen{overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:1.25rem 1.5rem max(1.5rem,env(safe-area-inset-bottom))}
  .screen>*{flex-shrink:0;flex-basis:auto}
  .head{flex-wrap:wrap;align-items:flex-end}
  .menu{max-height:calc(100vh - 4rem);overflow-y:auto}
  .menu button{min-height:max(44px,2.75rem)}

  /* side-by-side layouts with a fixed side column: stacked (there is room above and below) */
  .login,.look,.hub{grid-template-columns:1fr;min-height:auto;align-content:center;gap:1.4rem}
  .login-side{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.6rem 1.2rem;justify-content:center}
  .login-side .kidstage{grid-row:1 / span 2}
  .login-side .sm,.login-side .langseg{grid-column:1 / -1}
  .login-side .sm{margin-top:.8rem!important}
  .login-side .bubble{text-align:left}
  #mxl,#mxk{width:9rem!important;height:9rem!important}
  .rng{width:11rem;height:11rem}
  .look-main{flex-direction:column}
  .hub-side{flex-direction:row;justify-content:center}
  .gamewrap{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:.8rem}
  .game-side{flex-direction:row;justify-content:center;padding-top:0}
  .grow-grid,.chap,.ask,.shape-grid,.fit-grid,.syl-grid,.t-grid,.o-grid,.p-grid,.rec-grid,.quiz,.quizdone{min-height:auto}
  .grow-grid,.shape-grid,.fit-grid,.syl-grid,.t-grid,.o-grid,.p-grid,.rec-grid{flex:none}
  .quiz{grid-template-columns:minmax(0,1fr);align-content:start;gap:1.2rem;max-width:44rem;width:100%;align-self:center}
  .quizdone{grid-template-columns:minmax(0,1fr);align-content:start;justify-items:center;gap:1.2rem}
  .ask-left,.ask-right,.ask-left #page,.docwrap,.chap-right{overflow:visible}
  .ask-left #page{flex:none}
  .docwrap{flex:none;height:26rem;overflow:hidden}
  .map{flex:none;height:24rem}
  .syl{height:auto}
  .subjects{overflow:visible;flex:none}
  .boards{grid-template-columns:repeat(3,1fr)}
  .msgcard .chat{min-height:16rem}
  svg.rad{flex:none;height:20rem}
  .screen.closing{justify-content:flex-start;padding:1.5rem 0}
  .closing .close-in{margin:auto}
  .lchap .lessonbtn{display:grid;grid-template-columns:auto minmax(0,1fr);justify-content:start;align-items:center;column-gap:.6em;row-gap:.1em;height:auto;min-height:max(44px,2.75rem);padding:.55em 1em;white-space:normal;text-align:left;line-height:1.25}
  .lchap .lessonbtn .sm{grid-column:2}

  /* the presenter bar: the steps scroll sideways (js/app.js keeps the current one in view), the network state is its
     icon and colour, icons big enough to tap */
  #steps{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-self:stretch;align-items:center}
  #steps::-webkit-scrollbar{display:none}
  #bar{height:calc(3rem + var(--sa-t, 0px))}
  #stage{top:calc(3rem + var(--sa-t, 0px))}
  .menu{top:calc(3rem + var(--sa-t, 0px))}
  #steps button{flex:none;min-height:max(44px,2.75rem)}
  .iconbtn{width:max(44px,2.8rem);height:max(44px,3rem);flex:none}
  .net{flex:none;font-size:0;gap:0;width:2.1rem;height:2.1rem;padding:0;justify-content:center}
  .net svg{width:1rem;height:1rem}
  .between>.btn{flex:none;white-space:nowrap}

  /* ── the cqw screens, re-sized in em (font-size follows the root size, so em lengths do too) ── */
  .lp,.ls,.gd{font-size:calc(1.05rem * var(--g-type,1))}
  .jn,.hm{font-size:calc(1.05rem * var(--g-type,1.15))}
  .lp-top,.ls-top{gap:.6em;padding:.6em 1.25rem}
  .pill{gap:.4em;padding:.45em .85em;min-height:max(44px,2.75rem)}
  .ls-top .x,.hm .lp-top #out{min-width:max(44px,2.75rem);justify-content:center}
  .pill img{width:1.3em}
  .pill .ic,.jn-foot .pill .ic{width:1.25em;height:1.25em}
  .subjs{gap:.35em;padding:.15em}
  .sj{gap:.35em;padding:.35em .75em .35em .4em;min-height:max(44px,2.75rem)}
  .sj img{width:1.5em}
  [data-words="none"] .sj,[data-words="one"] .sj{padding:.4em}
  .sun{gap:.35em;padding:.35em .8em .35em .45em}
  .sun img{width:1.5em}

  /* join: the quest */
  .jn-top{gap:1em;padding:.8em 1.25rem .6em}
  .quest li{gap:.3em}
  .quest li::before{top:calc(1em - 1.5px);height:3px}
  .quest .stone{width:2em;height:2em;padding:0;border:0;gap:0;box-shadow:0 .15em 0 #C9D8C2}
  .quest li.on .stone{box-shadow:0 .15em 0 #E0B34A,0 0 0 .25em rgba(246,196,69,.35)}
  .jn-main{display:flex;flex-direction:column;justify-content:center;gap:1em;padding:.4em 1.5rem 1em;overflow:hidden}
  .jn-guide{flex:none;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:.8em;width:100%;max-width:36em;align-self:center}
  .jn-guide #jmx{width:8rem!important;height:8rem!important}
  .jn-guide .jb{flex:0 1 auto;max-width:28em;border-radius:1em;padding:.6em .9em;box-shadow:0 .4em 1em rgba(20,40,30,.15)}
  .jn-guide .jb::after{left:-.55em;top:50%;bottom:auto;margin:-.6em 0 0;border:.6em solid transparent;border-right-color:#fff;border-left:0}
  .jn-card{flex:0 1 auto;min-height:0;width:100%;max-width:36em;align-self:center;border-radius:1.2em;padding:1.3em 1.4em 1.4em;box-shadow:0 .5em 1.4em rgba(20,40,30,.14)}
  .jn-card h1{margin:0 0 .7em}
  .big-in{padding:.5em .7em;border-radius:.7em;border-width:2px}
  .big-in.sm2{margin-top:.7em}
  .chips2{gap:.45em;margin-top:.5em}
  .chips2 .ch,.chips2.big .ch{padding:.5em .95em;min-height:max(44px,2.75rem)}
  .grades2 .ch{min-width:3.4em}
  .jboards{gap:.6em}
  .jb2{gap:.25em;padding:.75em .8em;border-radius:.8em;border-width:2px;box-shadow:inset 0 .3em 0 var(--bc)}
  .buddies{gap:.6em}
  .bud{gap:.25em;padding:.5em;border-radius:1em;border-width:3px}
  .bud .budmx{width:7rem!important;height:7rem!important}
  .loves{gap:.6em}
  .love{gap:.3em;padding:.7em .5em;border-radius:.9em;border-width:3px}
  .love img{width:2.8em}
  .stars{height:20em;border-radius:1em}
  .star{width:3.2em!important}
  .qrow{gap:.6em;margin-bottom:.7em}
  .jn .spk{width:max(44px,2.75rem);height:max(44px,2.75rem);box-shadow:0 .25em 0 #C8931C}
  .qopts{grid-template-columns:repeat(auto-fit,minmax(7em,1fr));gap:.6em}
  .qo{gap:.3em;min-height:3.4em;padding:.6em;border-radius:.8em;border-width:2px;box-shadow:0 .25em 0 #DCE6D6}
  .qo img{width:3em}
  .cfield2{gap:.5em;margin-bottom:.7em}
  .cfield2 img{width:2.2em}
  .readword{margin:.2em 0 .5em}
  .jn-foot{gap:.8em;padding:.7em 1.25rem max(.7em,env(safe-area-inset-bottom))}
  .jnext{min-width:7em;height:3rem}
  .jprof h1{margin:.1em 0 .5em}
  .pchips{gap:.45em;margin-bottom:.9em}
  .pchips span{gap:.3em;padding:.35em .75em}
  .pchips .ic{width:1.1em;height:1.1em}
  .pgrid{gap:1em;margin-bottom:.9em}
  .plove{gap:.5em;margin-top:.3em}
  .plove span{gap:.3em}
  .plove img{width:1.5em}
  .pace{margin:.15em 0}
  .pset{border-radius:.8em;padding:.75em .95em;margin-bottom:1em}
  .pset p{margin:.3em 0 0}
  .btn.big{padding:0 1.3em;height:3rem}

  /* home */
  .hm .lp-top{gap:.7em}
  .hmx{width:4.5rem;height:4.5rem}
  #hmx{width:4.5rem!important;height:4.5rem!important}
  .hm-main{grid-template-columns:minmax(0,1fr);align-content:start;gap:1em;padding:.3em 1.25rem 1.5em}
  .hm-col{gap:.7em}
  .hcont{gap:.9em;padding:1em 1.2em;border-radius:1.1em;box-shadow:0 .4em 0 #C8931C}
  .hcont img{width:3.2em}
  .hcont .ic{width:1.8em;height:1.8em}
  .hsubs{grid-template-columns:repeat(auto-fill,minmax(calc(var(--g-target,8) * .5em + 6em),1fr));gap:calc(var(--g-gap,1.4) * .35em)}
  .hsub{gap:.25em;padding:.75em .85em;border-radius:.9em;box-shadow:0 .22em 0 rgba(0,0,0,.15);min-height:calc(var(--g-target,8) * .3em + 2.6em)}
  .hsub img{width:1.9em}
  .hfeats{grid-template-columns:repeat(4,minmax(0,1fr));gap:.6em}
  .hfeat{gap:.2em;padding:.8em;border-radius:.9em;box-shadow:0 .22em 0 rgba(0,0,0,.15)}
  .hfeat img{width:2.1em;margin-bottom:.2em}
  .hm .lcard{border-radius:.8em;padding:.9em}

  /* path: the trail beside a narrower side column */
  .lp-main{grid-template-columns:minmax(0,1fr) 19rem;gap:1rem;padding:0 1.25rem 0 0}
  [data-stage="study"] .lp-main{grid-template-columns:minmax(0,1fr) 18rem}
  .trail{padding:.5em 0 4em}
  .lp .unit{gap:calc(var(--g-gap) * .3em);padding-bottom:calc(var(--g-gap) * .7em)}
  .lp .banner{width:min(24em,92%);gap:.6em;padding:calc(var(--g-pad) * .25em) 1em;border-radius:calc(var(--g-radius) * .45em);box-shadow:0 .25em 0 rgba(0,0,0,.18);margin:.5em 0}
  .banner .un{gap:.35em}
  .banner .un img{width:2em}
  .banner .ur{padding:.2em .55em}
  .unit.sel .banner{outline-width:2px;outline-offset:2px}
  .lp .steps{gap:calc(var(--g-gap) * .3em)}
  .lp[data-words="none"] .banner{width:auto}
  .lp .node{--s:min(calc(var(--g-target) * .24em + 1.7em),6.5rem);font-size:inherit;transform:none}
  .lp .node .go{font-size:1em}
  .lp .node .go{right:calc(100% + .6em);padding:.35em .8em;box-shadow:0 .2em .5em rgba(0,0,0,.18)}
  .lp .node .go .ic{width:1.3em;height:1.3em}
  .lp .nl{left:calc(100% + .6em);width:min(10em,30vw)}
  .mxslot{transform:translate(calc(-100% - 8.6rem),-62%)}
  .lp[data-stage="study"] .mxslot,.lp[data-stage="learn"] .mxslot{transform:translate(calc(-100% - 6.6em),-60%)}
  .lp[data-stage="play"] #mxslot,.lp[data-stage="explore"] #mxslot{width:5.5rem!important;height:5.5rem!important}
  .lp[data-stage="learn"] #mxslot{width:5.5rem!important;height:5.5rem!important}
  .lp[data-stage="study"] #mxslot{width:4.4rem!important;height:4.4rem!important}
  .lp-side{gap:.8em;padding:.6em 0 1.2em}
  .lp-side .lcard{border-radius:.8em;padding:1em}
  .lp-side .lcard.soft p{gap:.5em}
  .lp-side .lcard.soft .ic{width:1.4em;height:1.4em}
  .lchap h2{margin:.2em 0 .5em}
  .lchap .tl{margin:0 0 .7em}
  .lchap .lessonbtn{margin-top:.4em}
  .lchap .src{margin-top:.7em;gap:.35em}
  .lchap .src .ic{width:1em;height:1em}
  .lmini .eb{margin-bottom:.25em}
  .gplants{gap:.4em;height:5em;margin-top:.4em}
  .gplants.sm{height:3.2em}
  .gp{gap:.2em}
  .gp img{width:1.3em}
  .gcard{border-radius:1.2em;padding:1em;box-shadow:0 .3em 1em rgba(30,60,40,.12)}
  .gcard .gplants{height:4em;gap:.15em}
  .gsun{gap:.25em;margin-top:.25em}
  .gsun img{width:1.1em}
  .bigplay{width:min(calc(var(--g-target) * .45em + 2em),9rem);border-radius:1.4em;box-shadow:0 .5em 0 #C8931C}
  .bigplay .ic{right:.6em;bottom:.6em;width:1.8em;height:1.8em}

  /* lesson */
  .ls-top .pbar{height:.8em;border-radius:.4em}
  .ls-top .pbar i{border-radius:.4em}
  .ls-top .x .ic{width:1.2em;height:1.2em}
  .ls-body,[data-stage="study"] .ls-body,[data-stage="learn"] .ls-body{gap:1.2em;padding:1.5em 2rem .5em 1.5rem}
  .ls-body,[data-stage="study"] .ls-body,[data-stage="learn"] .ls-body{align-items:start;align-content:start}
  .ls-mx{align-self:start;margin:0}
  .ls[data-stage="play"] #lsmx,.ls[data-stage="explore"] #lsmx{width:8rem!important;height:8rem!important}
  .ls[data-stage="learn"] #lsmx,.ls[data-stage="study"] #lsmx{width:6rem!important;height:6rem!important}
  .ls-card{gap:1em;padding:.2em}
  .ls-q{gap:.7em}
  .spk{width:max(max(44px,2.75rem),calc(var(--g-target) * .12em + 1.8em));height:max(max(44px,2.75rem),calc(var(--g-target) * .12em + 1.8em));box-shadow:0 .25em 0 #C8931C}
  [data-words="none"] .spk{width:4em;height:4em}
  .ls .opts{gap:calc(var(--g-gap) * .35em)}
  .ls .opts.words{grid-template-columns:repeat(auto-fit,minmax(7.5em,1fr))}
  .ls .opts.pics{grid-template-columns:repeat(auto-fit,minmax(calc(var(--g-target) * .3em + 2.5em),1fr))}
  .ls .opt{min-height:max(2.9rem,calc(var(--g-target) * .17em + 1.6em));padding:.65em .9em;border-radius:calc(var(--g-radius) * .4em);border-width:2px;box-shadow:0 .25em 0 var(--line)}
  .ls .opt{justify-content:center}
  .ls .opt:active{transform:translateY(.2em);box-shadow:0 .05em 0 var(--line)}
  .ls .opt.pic{gap:.35em;padding:.7em}
  .ls .opt.grp{gap:.45em;min-height:calc(var(--g-target) * .35em + 2em)}
  .ls .opt.grp img{width:calc(var(--g-target) * .08em + .9em)}
  .ls .qimg img{width:calc(var(--g-target) * .2em + 2em)}
  .ls .cfield{height:calc(var(--g-target) * .45em + 6em);border-radius:1em;border-width:2px}
  .ls .cthing{width:calc(var(--g-target) * .1em + 1.4em)}
  .ls .match{gap:.7em}
  .ls .mcol{gap:.5em}
  .ls .mi{padding:.6em .7em;border-radius:.7em;border-width:2px;box-shadow:0 .22em 0 var(--line);min-height:max(44px,2.75rem)}
  .ls .order{gap:.8em}
  .ls .otarget{min-height:3.4em;border-radius:.8em;border-width:2px;gap:.45em;padding:.55em}
  .ls .opool{gap:.45em}
  .ls .ochip{padding:.55em .8em;border-radius:.7em;border-width:2px;box-shadow:0 .2em 0 var(--line);min-height:max(44px,2.75rem)}
  .ls-foot{gap:.8em;padding:.7em 1.5rem max(.7em,env(safe-area-inset-bottom));min-height:4.6em}
  .ls-foot .fb{gap:.2em .7em}
  .ls-foot .plus{gap:.25em}
  .ls-foot .plus img{width:1.2em}
  .check{min-width:7.5em;height:3rem}
  .ls-end{gap:.8em;padding:.5em 0}
  .endstats{gap:.6em}
  .endstats>div{gap:.15em;padding:.6em .9em;border-radius:.8em;min-width:5.5em}
  .endstats img{width:1.8em}
  .endplant{gap:.35em}
  .endplant svg{height:5em}
  .sgrow{gap:.2em;max-width:100%;padding:.6em .8em;border-radius:.7em}
  .ls-end.grew{gap:.6em}
  .ls-end.grew .endstats>div{padding:.45em .8em}
  .ls-end.grew .endplant{gap:.5em}
  .ls-end.grew .endplant svg{height:3em}
  .ls-end .row{flex-wrap:wrap}

  /* garden: the hill grows to fill a tall screen, the beds sit on it in rows */
  .gd .sunball{right:1.2em;top:1em;width:5em}
  .gd .hill{left:-40%;right:-40%;bottom:-14%;height:62%}
  .gd-mx{left:50%;bottom:calc(48% + .5em);transform:translateX(-50%)}
  #gdmx{width:8rem!important;height:8rem!important}
  .beds{left:1.25rem;right:1.25rem;bottom:1.5em;height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4em .6em;align-items:end}
  .bed{gap:.35em;height:auto}
  .bed svg{height:9em}
  .bed .tag{gap:.3em;padding:.3em .6em .3em .35em;white-space:normal;text-align:left;line-height:1.2;font-size:.82em}
  .bed .tag img{width:1.3em;flex:none}
  .gd-note{padding:.8em 1.25rem max(.9em,env(safe-area-inset-bottom))}
}

/* iPads upright (600–1199 px): two columns where they fit */
@media (min-width:600px) and (max-width:1199px) and (orientation:portrait){
  .faces{grid-template-columns:repeat(4,minmax(0,1fr))}
  .look-side{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;align-items:start}
  .look-side>.card:first-child{grid-column:1 / -1}
  .gamewrap .gamearea{min-height:34rem}
  .trace .board{height:min(100%,36rem)}
}

/* ───────────────────────── 3. phones ───────────────────────── */
@media (max-width:599px){
  html{font-size:clamp(15px,4.1vw,17px)}

  /* the presenter bar: one row. Steps scroll sideways (js/app.js keeps the current one in view); the badge stays,
     on two short lines; the network state is its icon and colour */
  #bar{gap:.25rem;padding:var(--sa-t, 0px) calc(4.9rem + var(--sa-r, 0px)) 0 calc(.5rem + var(--sa-l, 0px))}
  .brand{gap:.3rem;font-size:1rem}
  .brand small{display:none}
  #steps{margin-left:.1rem;gap:.15rem}
  #steps button{height:100%;min-width:2.5rem;padding:0 .2rem;justify-content:center;border:0;border-radius:0}
  #steps button.on{background:none}
  #steps button b{min-width:1.75rem;height:1.75rem;border-radius:.55rem}
  #steps button span,#steps button.on span{display:none}
  .iconbtn{width:max(44px,2.6rem);border-radius:0}
  #askBtn{display:none}   /* on a phone Ask Dxtr is on her home and in the menu; the bar keeps room for the steps */
  #preview{top:calc(.35rem + var(--sa-t, 0px));right:calc(.4rem + var(--sa-r, 0px));height:auto;min-height:2.3rem;padding:.2rem .45rem;gap:0;width:4.2rem;letter-spacing:.06em;line-height:1.1;white-space:normal;text-align:center;justify-content:center}
  #preview i{display:none}
  .menu{left:.5rem!important;right:.5rem;min-width:0}
  #toast{left:1rem;right:1rem;bottom:1rem;transform:none;max-width:none}
  #sheet .panel{width:100%;padding:1.1rem 1.1rem max(1.4rem,env(safe-area-inset-bottom))}

  .screen{padding:1rem 1rem max(1.5rem,env(safe-area-inset-bottom));gap:.9rem}
  h1{font-size:1.6rem}
  .head .chips{justify-content:flex-start}
  .card{padding:.9rem 1rem}
  .btn{min-height:max(44px,2.75rem)}
  .seg button{padding:.55rem .6rem}
  .between{flex-wrap:wrap}

  /* one column everywhere */
  .grow-grid,.chap,.ask,.quiz,.quizdone,.shape-grid,.fit-grid,.syl-grid,.t-grid,.o-grid,.p-grid,.rec-grid,.close-row{grid-template-columns:minmax(0,1fr)}
  .ask-left{order:2}
  .ask-right{order:1}
  .tiles{gap:.5rem}
  .tile{padding:.7rem .4rem}
  .tile .n{font-size:1.6rem}

  /* login and look: a smaller mascot beside its bubble, then the things to tap */
  #mxl,#mxk{width:6.5rem!important;height:6.5rem!important}
  .rng{width:8rem;height:8rem}
  .login-side .bubble{font-size:1rem}
  .faces{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
  .face{padding:.6rem .3rem .55rem;font-size:.85rem}
  .fimg{width:3.8rem;height:3.8rem}
  .face.join .plus{width:3.4rem;height:3.4rem;font-size:2rem}
  .look-main{gap:.5rem}
  .said h2{font-size:1.4rem}
  .bigbtns{grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;width:100%}
  .bigbtn{padding:.7rem .4rem;font-size:1.3rem}
  .bigbtns .ic,.bigbtn img{width:2rem;height:2rem}
  .things{gap:.5rem}

  /* games hub: the three games as rows */
  #mxg{width:5rem!important;height:5rem!important}
  .hub-side{gap:.6rem}
  .hub-side .bubble{font-size:1rem}
  .stones{grid-template-columns:minmax(0,1fr);gap:.8rem}
  .stones .stone{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;justify-items:start;align-items:center;column-gap:1rem;row-gap:.2rem;padding:.8rem 1rem;text-align:left;border-radius:1.2rem}
  .stones .stone .disc{grid-row:1 / span 3;width:4.6rem;height:4.6rem;box-shadow:0 4px 0 var(--gold-d)}
  .stones .stone.done .disc{box-shadow:0 4px 0 var(--win-d)}
  .stones .stone .disc img{width:2.6rem;height:2.6rem}
  .stones .stone .glyph{font-size:2.6rem}
  .stones .stone .nm{font-size:1.1rem}
  #see{width:100%}

  /* one game: the game fills what is left of the screen, no scrolling while a finger draws or drags */
  .screen[data-screen="game"]{overflow:hidden}
  .screen[data-screen="game"] h1{font-size:1.3rem!important}
  #mxp{width:3.6rem!important;height:3.6rem!important}
  .game-side .bubble{font-size:.95rem;padding:.55rem .8rem}
  .game.trace{flex-direction:column;justify-content:flex-start;gap:.8rem}
  .trace .board{width:100%;height:auto;max-width:30rem;aspect-ratio:1}
  .tools{flex-direction:row;gap:1rem}
  .tool{width:3.6rem;height:3.6rem;border-radius:1rem}
  .tool .ic{width:1.7rem;height:1.7rem}
  .themes{gap:.6rem}
  .theme{padding:1rem .4rem;gap:.4rem;font-size:1rem;border-radius:1.1rem}
  .theme img{width:4rem;height:4rem}
  .thing{width:4.2rem;height:4.2rem;margin:-2.1rem 0 0 -2.1rem}
  .thing img{width:3.5rem;height:3.5rem}
  .thing b{width:1.8rem;height:1.8rem;font-size:1rem}
  .answers{gap:.8rem}
  .num{width:4.6rem;height:4.6rem;font-size:2.4rem;border-radius:1.1rem}
  .game.shapes{gap:.6rem;align-items:center}
  .tray,.homes{gap:.5rem;padding:.5rem}
  .piece,.home{width:4.4rem;height:4.4rem}
  .cheer b{font-size:1.8rem}

  /* it learns her */
  .loop{flex-wrap:wrap;gap:.4rem .5rem}
  .loop .sm{margin-left:0!important;max-width:none!important;flex-basis:100%}

  /* ask the book: the question first, then the page */
  .askrow input{height:max(44px,2.75rem)}
  .wsgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wsbtn .wsp{height:7rem;overflow:hidden}

  /* teacher and office */
  .tabs8{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hrow{grid-template-columns:5.5rem repeat(8,minmax(0,1fr));gap:.2rem}
  .hn{font-size:.72rem;line-height:1.15}
  .groups{grid-template-columns:minmax(0,1fr)}
  .where{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* syllabus lists */
  .boards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .subjects{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr))}

  /* skill path, quiz, chapter */
  .map{height:22rem}
  .map .node{width:3rem;height:3rem;font-size:1.1rem}
  .map .node .cap{top:3.5rem;white-space:normal;width:4.6rem;text-align:center;line-height:1.15}
  .quiz{align-content:start;gap:1rem}
  .qbox{padding:1.2rem 1rem}
  .qbox h2{font-size:1.3rem!important}
  .opt{padding:.8rem .9rem;font-size:1rem}
  .dverdict{padding:.8rem 1rem max(1rem,env(safe-area-inset-bottom))}
  .dverdict .go{padding:.75rem 1.2rem}
  .bigtick{width:6rem;height:6rem}
  .bigtick svg{width:3rem;height:3rem}
  .docwrap{height:20rem}
  .fab{position:fixed;right:1rem;bottom:1rem;width:3.2rem;height:3.2rem}
  .tab8 .btn{margin-left:0}

  /* close */
  #mxc{width:4.5rem!important;height:4.5rem!important}
  .closing .close-in{width:auto;margin:auto 1rem;gap:1.1rem}
  .close-top{gap:.9rem}
  .dxtr-word{font-size:3.4rem}
  .powered{font-size:.9rem;flex-wrap:wrap}
  .powered img{height:2rem}
  .close-line{font-size:1.05rem}
  .closing .cta{gap:.9rem}
  .qr{width:6rem;height:6rem}

  /* ── the cqw screens on a phone ── */
  .lp,.ls,.gd{font-size:calc(.9rem * var(--g-type,1))}
  .jn,.hm{font-size:calc(.9rem * var(--g-type,1.15))}
  .banner .un,.endstats span,.bed .tag,.lp .nl,.sj,.hsub small,.jb2 span,.hfeat span{font-size:max(11px,.8em)}
  .banner .ur,.lchap .src,.sgrow span,.ls-foot .fb em{font-size:max(11px,.75em)}
  .sgrow{font-size:max(11px,.82em)}
  .lp-top,.ls-top{padding:.5em 1rem}

  /* join: the quest as small dots, the current step named under its dot */
  .jn-top{gap:.6em;padding:.6em 1rem .3em}
  .quest{padding-bottom:1.35em;align-items:center}
  .quest li{gap:0;font-size:.8em}
  .quest li::before{top:calc(.45em - 1px);height:2px}
  .quest .stone{width:.9em;height:.9em;background:rgba(28,49,39,.18);box-shadow:none}
  .quest .stone img{display:none}
  .quest li.done .stone{background:#F0B94C}
  .quest li.on .stone{transform:scale(1.5);background:#FFF6D8;box-shadow:0 0 0 2px #F0B94C}
  .quest .ql{display:none}
  .quest li.on .ql{display:block;position:absolute;top:1.25em;white-space:nowrap;font-size:max(11px,.95em)}
  .quest li:first-child.on .ql{left:0}
  .quest li:last-child.on .ql{right:0}
  .jn-main{justify-content:flex-start;gap:.6em;padding:.3em 1rem .6em}
  .jn-guide #jmx{width:4.6rem!important;height:4.6rem!important}
  .jn-guide .jb{font-size:.95em;max-width:none;flex:1 1 auto}
  .jn-card{padding:1.1em 1.1em 1.2em;border-radius:1.1em}
  .jn-card h1{font-size:1.55em}
  .big-in{font-size:1.35em}
  .jboards{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5em}
  .jb2 b{font-size:1.1em}
  .buddies{gap:.4em}
  .bud{padding:.35em}
  .bud .budmx{width:4.6rem!important;height:4.6rem!important}
  .loves{gap:.45em}
  .love{padding:.6em .3em}
  .love img{width:2.4em}
  .stars{height:16em}
  .star{width:3em!important}
  .qrow h1{font-size:1.35em}
  .readword{font-size:3.6em}
  .jn-foot{flex-wrap:wrap;gap:.4em .6em;padding:.5em 1rem max(.6em,env(safe-area-inset-bottom))}
  .jn-foot .grow1{display:none}
  .jpriv{order:-1;flex-basis:100%;text-align:center}
  .jnext{margin-left:auto}
  .jprof h1{font-size:2em}
  .pgrid{grid-template-columns:minmax(0,1fr)}
  .btn.big{width:100%}

  /* home: one column, two subjects a row */
  .hm .lp-top{gap:.55em;padding:.6em 1rem}
  .hmx,#hmx{width:3rem!important;height:3rem!important}
  .hi{flex:1;min-width:0}
  .hi h1{font-size:1.45em}
  .hi .sm{display:block;line-height:1.3}
  .hm .lp-top #out{padding:.45em;min-width:max(44px,2.75rem);justify-content:center}
  .hm .lp-top #out span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hm-main{padding:.2em 1rem 1.5em;gap:.9em}
  .hcont{padding:.9em 1em;gap:.75em}
  .hcont b{font-size:1.25em}
  .hcont img{width:2.7em}
  .hfeats{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55em}

  /* path: the trail fills the screen; the chapter card is a panel at the bottom */
  .lp .lp-top{flex-wrap:wrap;row-gap:.45em}
  .lp-top .back span,#gbtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lp-top .back,#gbtn{min-width:max(44px,2.75rem);justify-content:center;padding:.45em}
  .lp .lp-top .ctx{flex:1;min-width:0}
  .lp-top .subjs{order:5;flex-basis:100%}
  .lp-main,[data-stage="study"] .lp-main{display:flex;flex-direction:column;padding:0;gap:0}
  .trail{flex:1 1 auto;min-height:0;padding:.4em 0 2em}
  .lp-side{flex:none;max-height:42%;overflow-y:auto;padding:.7em 1rem max(.8em,env(safe-area-inset-bottom));gap:.6em;background:var(--surf);border-top:1px solid var(--line);border-radius:1.2em 1.2em 0 0;box-shadow:0 -.4em 1.4em rgba(0,0,0,.18)}
  .lp-side .lcard{background:none;border:0;padding:.2em 0}
  .lp-side .lmini{border-top:1px solid var(--line);border-radius:0;padding-top:.6em}
  .lp-side .gcard{display:none}
  .lp-side .bigplay{width:min(calc(var(--g-target) * .3em + 2em),6.5rem)}
  .lp .banner{width:calc(100% - 2rem)}
  .lp[data-words="none"] .banner{width:auto}
  .lp .nl{width:min(9em,34vw)}
  .mxslot{transform:translate(calc(-100% - 5.6em),-60%)}
  .lp[data-stage="study"] .mxslot,.lp[data-stage="learn"] .mxslot{transform:translate(calc(-100% - 6.6em),-60%)}
  .lp[data-stage="play"] #mxslot,.lp[data-stage="explore"] #mxslot{width:4.4rem!important;height:4.4rem!important}
  .lp[data-stage="learn"] #mxslot{width:4.2rem!important;height:4.2rem!important}
  .lp[data-stage="study"] #mxslot{width:3.6rem!important;height:3.6rem!important}

  /* lesson: a small mascot above the question, the card full width */
  .ls-top{gap:.6em}
  .ls-body,[data-stage="study"] .ls-body,[data-stage="learn"] .ls-body{display:flex;flex-direction:column;align-items:stretch;gap:.3em;padding:.2em 1rem .5em}
  .ls-mx{align-self:flex-start;margin:0}
  .ls[data-stage="play"] #lsmx,.ls[data-stage="explore"] #lsmx{width:5rem!important;height:5rem!important}
  .ls[data-stage="learn"] #lsmx,.ls[data-stage="study"] #lsmx{width:3.6rem!important;height:3.6rem!important}
  .ls-card{flex:0 1 auto;min-height:0}
  .ls-q h2{font-size:1.35em}
  .ls .opts.words{grid-template-columns:repeat(auto-fit,minmax(6.5em,1fr))}
  .ls .match{gap:.5em}
  .ls .mi{font-size:.92em}
  .ls-foot{padding:.6em 1rem max(.6em,env(safe-area-inset-bottom));gap:.6em}
  .ls-end h1{font-size:1.8em}
  .endstats{flex-wrap:wrap;justify-content:center}

  /* garden */
  #gdmx{width:5.5rem!important;height:5.5rem!important}
  .gd .sunball{width:4em}
  .beds{left:1rem;right:1rem;gap:1.2em .4em}
  .bed svg{height:7em}
  .bed .tag{font-size:max(11px,.8em)}
}

/* small phones (360 px class): the brand keeps its sprout, the word goes, so the steps have room */
@media (max-width:380px){
  .brand{font-size:0}
  .faces{gap:.5rem}
  .stones .stone .disc{width:4rem;height:4rem}
}

/* ───────────────────────── 4. phones on their side: scroll rather than cut off ───────────────────────── */
@media (max-height:560px) and (orientation:landscape) and (max-width:1279px){
  .screen{overflow-y:auto;overflow-x:hidden}
  .screen>*{flex-shrink:0;flex-basis:auto}
}