/* Phones held sideways (May 2026-10-04: 只做横版): a phone on its side is 360-430 px tall, so the garden's bars, captions and cards are made
   smaller and kept apart. Only for short landscape screens; the desktop layout is untouched. Each chapter's own stylesheet is added when
   the chapter starts, after this one, and some name their root by id (#s12 .s12-caption), so every rule here starts html body:not(#_):
   always true, and as strong as an id.
   Measured 2026-10-05 at 844 x 390 (iPhone 14) and 667 x 375 (iPhone SE): the header took 88 px, captions ran into the play bar in every
   chapter, the summary card shrank to a third of its size. How much of the right side the play bar and a
   chapter's card take is measured by phone.js (--phone-bar, --phone-card).
   Heights are in svh, not vh: Safari's vh is the screen's height with its address bar away, so a card sized in vh ran under the bar
   and its Continue could not be reached (May 2026-10-05, on her phone). */
@media (orientation: landscape) and (max-height: 500px) {
  /* the header: a slim strip, the notch side kept clear */
  html body:not(#_) header{height:54px;padding:8px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));gap:14px}
  html body:not(#_) header .brand{width:104px}
  html body:not(#_) #map-location{font-size:14px}
  html body:not(#_) #map-return,html body:not(#_) .pitch-scene-skip.pill,html body:not(#_) #start-over,html body:not(#_) #hear-may{min-height:36px;padding:0 13px 0 11px;font-size:13px;gap:6px}
  html body:not(#_) #sound-toggle{width:36px;height:36px}
  /* Skip, Map and the sound button over the chapters' cards (May 2026-10-06, on her phone: while I talk there is no Skip and no Map):
     the cards take the whole height while the bars are away, and the chapters come after the header in the page at the same height,
     so a card covered the buttons even when a tap brought them back. Only the buttons go over: the wordmark and the header's fade stay
     under a chapter's layer as before (chapter 05 puts its titles where the wordmark is). So on a phone the header is not one layer;
     each part is its own, and each part fades rather than the header (a header fading would be one layer again). The buttons step
     aside for chapter 08's video player, which has its own close where they are */
  html body:not(#_)>header{z-index:auto;background:none}
  html body:not(#_)>header::before{content:'';position:absolute;inset:0;z-index:12;background:linear-gradient(#FAF8EFed,#FAF8EF00);pointer-events:none}
  html body:not(#_)>header .brand,html body:not(#_)>header #map-location,html body:not(#_)>header .stage-tag{position:relative;z-index:12}
  html body:not(#_)>header .top-actions{position:relative;z-index:13}
  html body:not(#_):has(.s08-modal:not([hidden]))>header .top-actions{visibility:hidden}
  /* chapter 06's slide card keeps no layer of its own for each page, photo and picture on a phone (May 2026-10-06, on her phone, three
     times: the two drinks and the wider menu show no photos; no desktop browser does that, Safari's engine included). Probably the phone
     out of room for layers late in the chapter; they animate as before, with fewer layers held */
  html body:not(#_) .s06-deck section,html body:not(#_) .s06-deck .ph,html body:not(#_) .s06-deck .ph img{will-change:auto}
  /* and its photos in a row (the two drinks, the wider menu) sized outright, the sizes the row gives them anyway (440 px of card: two
     4:5, three 3:4), rather than worked out from aspect-ratio inside a flex row */
  html body:not(#_) .s06-deck .duo .ph{flex:0 0 212px;width:212px;height:265px;aspect-ratio:auto}
  html body:not(#_) .s06-deck .trio .ph{flex:0 0 138px;width:138px;height:184px;aspect-ratio:auto}
  /* the welcome's Hear May (only when the phone held May's voice back) at the bottom left: Continue is at the bottom in the middle
     (May 2026-10-05, on her phone: the two ran into each other) */
  html body:not(#_) #hear-may{left:max(12px,env(safe-area-inset-left));right:auto;bottom:12px;transform:none}
  /* her welcome's subtitle at the bottom, under her and the gate's sign rather than across them */
  html body:not(#_) #voice-subtitles{bottom:12px;font-size:13px;padding:5px 14px 6px;max-width:calc(100vw - 260px)}

  /* the play bar: small, bottom right; the caption: bottom left, as wide as the room the bar and the chapter's card leave */
  html body:not(#_) .s05-controls,html body:not(#_) .s06-controls,html body:not(#_) .s07-controls,html body:not(#_) .s08-controls,html body:not(#_) .s09-controls,html body:not(#_) .s10-controls,
  html body:not(#_) .s12-controls{left:auto!important;right:max(10px,env(safe-area-inset-right))!important;bottom:8px!important;transform:scale(.82);
    transform-origin:100% 100%;flex-wrap:nowrap!important;justify-content:flex-end}
  html body:not(#_) .s05-caption,html body:not(#_) .s06-caption,html body:not(#_) .s07-caption,html body:not(#_) .s08-caption,html body:not(#_) .s09-caption,html body:not(#_) .s10-caption,
  html body:not(#_) .s12-caption{left:max(12px,env(safe-area-inset-left))!important;right:auto!important;top:auto!important;bottom:10px!important;
    transform:none!important;width:max-content;white-space:normal!important;
    max-width:calc(100vw - max(12px,env(safe-area-inset-left)) - max(var(--phone-bar,340px),var(--phone-card,0px)) - 16px)!important;
    text-align:left;font-size:13px!important;line-height:1.35!important;padding:5px 12px 6px!important;border-radius:14px!important}

  /* while a chapter plays, the top bar and the play bar fade out (May 2026-10-05: 可以的，自动隐藏); phone.js says when (phone-quiet),
     and a tap anywhere brings them back */
  html body:not(#_)>header>*,html body:not(#_)>header::before,html body:not(#_) .pitch-progress-host{transition:opacity .45s ease}
  html body.phone-quiet:not(#_)>header>*,html body.phone-quiet:not(#_)>header::before,html body.phone-quiet:not(#_) .pitch-progress-host{opacity:0!important}
  html body.phone-quiet:not(#_)>header *,html body.phone-quiet:not(#_) .pitch-progress-host,html body.phone-quiet:not(#_) .pitch-progress-host *,
  html body.phone-waking:not(#_)>header *,html body.phone-waking:not(#_) .pitch-progress-host,
  html body.phone-waking:not(#_) .pitch-progress-host *{pointer-events:none!important}

  /* the map: the intro line, Start over and the camera hint on one row, apart */
  html body:not(#_) #map-intro{left:max(12px,env(safe-area-inset-left))!important;bottom:10px!important;max-width:calc(100vw - 330px);font-size:12px;
    line-height:1.35;padding:7px 12px}
  html body:not(#_) #start-over{left:auto!important;right:max(10px,env(safe-area-inset-right));bottom:10px}
  html body:not(#_) #courtyard-camera-tools{bottom:54px!important;right:max(10px,env(safe-area-inset-right))!important}
  html body:not(#_) #courtyard-camera-tools span{font-size:10.5px;padding:6px 10px}
  html body:not(#_) .presentation-point{min-height:30px;padding:3px 10px 3px 4px;gap:6px;font-size:11px}   /* (stops close together ran into each other) */
  html body:not(#_) .presentation-point i{width:19px;height:19px;flex-basis:19px}
  /* with a stop's card open on the right, the camera hint goes to the bottom left */
  html body:not(#_):not([data-card-closed="true"]):has(.stop-summary:not([hidden])) #courtyard-camera-tools{right:auto!important;
    left:max(12px,env(safe-area-inset-left))!important;bottom:10px!important}

  /* a stop's summary card: wider and readable, scrolling inside if it is long (on a desktop it is one slide that never scrolls; here it
     would have shrunk to a third, phone.js and fitStopCards leave it unscaled) */
  html body:not(#_) .stop-summary{top:60px;right:max(10px,env(safe-area-inset-right));width:min(440px,52vw);max-height:calc(100svh - 72px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:16px 18px 14px;border-radius:18px;transform:none!important}
  html body:not(#_) .stop-summary h2{font-size:21px}
  html body:not(#_) .stop-summary.menu h2{font-size:22px}
  html body:not(#_) .stop-summary .bs-lead{font-size:13px;margin-bottom:10px}
  html body:not(#_) .stop-summary li{gap:12px;padding:8px 0}
  html body:not(#_) .stop-summary li b{width:auto;min-width:76px;font-size:30px}
  html body:not(#_) .stop-summary li span{font-size:12.5px}
  /* the card's way on (Next, Continue) stays at its bottom edge while the rest scrolls: on a phone the card is twice as tall as the
     screen, and its Continue was out of sight */
  html body:not(#_) .stop-summary .card-next{position:sticky;bottom:-14px;z-index:2;margin:12px -18px -14px;padding:10px 18px 12px;
    background:#FAF8EF;box-shadow:0 -8px 14px -6px rgba(44,50,24,.12)}
  /* chapter 9: the cream fade under the subtitles, 220 px on a laptop, the same share of the screen here (May 2026-10-06, her phone: the fade
     made the lower part of the operating system diagram hard to read; the subtitles keep their own cream pill) */
  html body:not(#_) .s09-foot{height:88px}
}