/* Landscape (Nov 4 2026, Peretz: "Can we have landscape as well as portrait").
   Only applies when the screen is wider than tall AND either short (a phone turned sideways) or a touch tablet.
   Portrait phones, and desktop browsers, are untouched. Safe areas: the notch/punch-hole sits on a side in landscape. */
@media (orientation:landscape) and (max-height:600px) and (min-width:560px), (orientation:landscape) and (pointer:coarse) and (min-width:900px){
  :root{--lsw:780px}
  #app{max-width:none}
  .screen{left:env(safe-area-inset-left);right:env(safe-area-inset-right)}
  /* plain screens: full-width header, content in a centred column */
  .plainhead,.playbar{padding-left:max(12px,calc((100% - var(--lsw))/2));padding-right:max(12px,calc((100% - var(--lsw))/2))}
  .shopmain,.acctmain,.boardmain,.duelmain,.placemain,.listmain,.cardsmain{padding-left:max(14px,calc((100% - var(--lsw))/2));padding-right:max(14px,calc((100% - var(--lsw))/2))}
  #s-board .boardme,#s-board>footer,#s-board>.bfoot{padding-left:max(12px,calc((100% - var(--lsw))/2));padding-right:max(12px,calc((100% - var(--lsw))/2))}

  #s-map[hidden]{display:none}
  /* ---- map: player panel on the left, the path on the right ---- */
  #s-map{display:grid;grid-template-columns:minmax(270px,34%) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;
    grid-template-areas:"head path" "xp path" "play path" "dock path"}
  #s-map .maphead{grid-area:head;padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:6px}
  #s-map .xpbar{grid-area:xp;margin:6px 12px 4px}
  #s-map .playrow.three{grid-area:play;grid-template-columns:1fr;grid-auto-rows:minmax(0,max-content);align-content:start;gap:6px;margin:4px 10px;overflow-y:auto;min-height:0}
  #s-map .playrow.three .pbtn{flex-direction:row;justify-content:flex-start;text-align:left;padding:7px 10px;gap:10px}
  #s-map .playrow.three .pbtn .pt{align-items:flex-start}
  #s-map .playrow.three .pbtn small{display:block}
  #s-map .playrow.three .pbtn .pic2{font-size:1.3rem}
  #s-map .pathwrap{grid-area:path;border-left:1px solid rgba(212,175,55,.22);padding-top:calc(6px + env(safe-area-inset-top))}
  #s-map .pathwrap>*{max-width:560px;margin-left:auto;margin-right:auto}
  #s-map .dock{grid-area:dock;gap:2px;padding:5px 6px calc(5px + env(safe-area-inset-bottom))}
  #s-map .dockbtn{padding:4px 1px;font-size:.6rem}
  #s-map .dockbtn .ic{height:22px}
  #s-map .dockbtn .ic .gi{width:20px;height:20px}

  /* ---- games: the content uses the width, side by side where it helps ---- */
  .stage>.pad{width:100%;max-width:var(--lsw);margin:0 auto;box-sizing:border-box}
  /* learn: card left, the rest right */
  .pad:has(>.lcard){display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto auto 1fr;column-gap:20px;
    grid-template-areas:"card ." "card title" "card sub" "card dots" "card btns" "card ."}
  .pad:has(>.lcard)>.gtitle{grid-area:title}
  .pad:has(>.lcard)>.gsub{grid-area:sub}
  .pad:has(>.lcard)>.dots{grid-area:dots}
  .pad:has(>.lcard)>.btnrow{grid-area:btns}
  .pad:has(>.lcard)>.lcard{grid-area:card;min-height:0;max-height:min(100%,640px);height:100%;align-self:center}
  .pad:has(>.lcard) .lface .pic{--h:clamp(70px,calc(100dvh - 240px),220px)}
  .pad:has(>.lcard) .lface .he{font-size:clamp(2rem,7vh,3.4rem)}
  .pad:has(>.lcard) .lface .en{font-size:clamp(1.3rem,5vh,2rem)}
  /* multiple choice: question left, answers right */
  .pad:has(>.qcard):has(>.opts){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto auto minmax(0,1fr);column-gap:16px;
    grid-template-areas:"top top" "timer timer" "q opts";align-content:start}
  .pad:has(>.qcard):has(>.opts)>.qtop{grid-area:top}
  .pad:has(>.qcard):has(>.opts)>.timer{grid-area:timer}
  .pad:has(>.qcard):has(>.opts)>.qcard{grid-area:q;margin:0;align-self:center;height:100%;max-height:440px;box-sizing:border-box}
  .pad:has(>.qcard):has(>.opts)>.opts{grid-area:opts;align-content:center}
  .pad:has(>.qcard):has(>.opts)>:not(.qtop):not(.timer):not(.qcard):not(.opts){grid-column:1/-1}
  /* build the word: picture left, slots and tiles right */
  .pad:has(>.bprompt){display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:16px;grid-template-rows:auto auto auto auto 1fr;
    grid-template-areas:"title title" "sub sub" "prompt slots" "prompt tiles" "rest rest";align-content:start}
  .pad:has(>.bprompt)>.gtitle{grid-area:title}
  .pad:has(>.bprompt)>.gsub{grid-area:sub}
  .pad:has(>.bprompt)>.bprompt{grid-area:prompt;flex-direction:column;justify-content:center;margin:0}
  .pad:has(>.bprompt)>.slots{grid-area:slots}
  .pad:has(>.bprompt)>.tiles{grid-area:tiles}
  .pad:has(>.bprompt)>:not(.gtitle):not(.gsub):not(.bprompt):not(.slots):not(.tiles){grid-column:1/-1}
  .opts.pics .opt .pic{--h:clamp(48px,calc((100dvh - 210px)/2 - 18px),130px)}
  .pad:has(>.bprompt)>.bhints{justify-self:center}
  /* match: picture beside its label so 4 rows fit */
  .mboard{gap:8px 40px}
  .mt-tile.tpic{flex-direction:row;gap:10px;justify-content:flex-start;padding:4px 10px}
  .mt-tile.tpic .cap{margin-top:0;text-align:left;font-size:.85rem}
  .mt-tile{padding:3px 8px}
  .mt-tile .he{font-size:clamp(1.15rem,6vh,1.9rem)}
  .mt-tile .pic{--h:max(30px,min(64px,calc((100dvh - 180px)/4 - 10px)))}
  /* falling words: centred, not stretched */
  .stage>.fall{width:100%;max-width:var(--lsw);margin:0 auto}
  /* flashcards: card left, buttons right */
  .cardsmain{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px;grid-template-rows:auto auto auto auto 1fr;align-content:start;
    grid-template-areas:"chips chips" "card counter" "card hint" "card btns" "card small"}
  .cardsmain>.chiprow{grid-area:chips}
  .cardsmain>.counter{grid-area:counter;align-self:end}
  .cardsmain>.flipwrap{grid-area:card}
  .cardsmain>.hint{grid-area:hint}
  .cardsmain>.btnrow{grid-area:btns}
  .cardsmain>.btnrow.small{grid-area:small;align-self:start}
  .cardsmain>.chiprow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cardsmain .flip{max-height:none;aspect-ratio:auto;height:max(200px,calc(100dvh - 140px))}
  /* sign in / create account: welcome on the left, the form on the right (the form scrolls above the keyboard) */
  .acctmain:has(>.gate){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:16px;row-gap:10px;align-items:start;align-content:start}
  .acctmain:has(>.gate)>*{grid-column:2}
  .acctmain:has(>.gate)>.gate{grid-column:1;grid-row:1/span 8;position:sticky;top:0}
  /* dialogs: fit the short screen, scroll if they must */
  .panel{max-height:calc(100dvh - 24px);overflow-y:auto}
}

/* phones on their side: tighten vertical space a little more */
@media (orientation:landscape) and (max-height:600px){
  .plainhead,.playbar{padding-top:calc(6px + env(safe-area-inset-top));padding-bottom:5px}
  .plainhead h2{font-size:1.02rem}
  .pad{padding-top:8px}
  .pad>.gtitle{margin-top:0;margin-bottom:2px;font-size:1.1rem}
  .pad>.gsub{margin-bottom:6px}
  .qcard{min-height:0}
  .opts{gap:8px}
  .opt{min-height:44px}
}

/* Fill the gap (Nov 2026): picture + sentence on the left, choices and the answer on the right */
@media (orientation:landscape) and (max-height:600px) and (min-width:560px), (orientation:landscape) and (pointer:coarse) and (min-width:900px){
  .pad.gappad{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:16px;row-gap:8px;align-content:start;
    grid-template-areas:"top top" "q opts" "q after" "q ."}
  .gappad>.qtop{grid-area:top;margin-bottom:0}
  .gappad>.gapq{grid-area:q;align-self:start}
  .gappad>.gapopts{grid-area:opts;align-self:start}
  .gappad>.gapafter{grid-area:after}
  .gappad .gappic .pic{--h:clamp(80px,calc(100vh - 250px),210px)}
  .gappad .gaps{font-size:1.02rem}
}