/* LAYOUT C, small phones (Eivind, 2026-10-12: "speakers go on top again, quick settings simplified, find another place for the satchel";
   he picked C from sketches/phone-layout-2026-10-12): one strip under the header = the people on the left (placed by footCast in
   play-stage.js), the satchel at the right end. The bottom keeps only the choices, the subtitles and Next. Header = title, ?, play, wheel;
   story mode, narration and the book live in the settings sheet. Linked LAST. Probe: node tests/phone-c.cjs [WxH] (PHONE_C=1). */
@media (max-width:699px){
  /* header: fewer glyphs (all three are rows in the settings sheet) */
  html body.ps-on .pl-head .pl-nav #eyeBtn,html body.ps-on .pl-head .pl-nav #micBtn,html body.ps-on .pl-head .pl-nav #textHb{display:none!important}

  /* the folded satchel: top right, in the people's strip */
  html body.ps-on .ps-sat:not(.open){position:fixed!important;top:calc(var(--ps-hh,44px) + 4px)!important;bottom:auto!important;left:auto!important;
    right:max(8px,env(safe-area-inset-right))!important;transform:none!important;width:auto!important;height:auto!important;flex-direction:column!important;align-items:flex-end!important;pointer-events:none}
  html body.ps-on .ps-sat:not(.open) .ps-bag{transform:scale(.62)!important;transform-origin:100% 0!important;margin:0!important;pointer-events:auto;order:-1}
  html body.ps-on.ps-jim-right .ps-sat:not(.open) .ps-bag{transform-origin:100% 0!important}
  html body.ps-on .ps-sat:not(.open) .ps-sat-line{display:none!important}   /* the SCUMM sentence is a pointer thing; phones tap */

  /* the item tile: beside the bag, same strip */
  html body.ps-on:not(.ps-rowr) .ps-itile:not([hidden]),html body.ps-on.ps-jim-right:not(.ps-rowr) .ps-itile:not([hidden]){
    top:calc(var(--ps-hh,44px) + 8px)!important;bottom:auto!important;left:auto!important;right:calc(max(8px,env(safe-area-inset-right)) + 68px)!important;width:38px!important;height:38px!important}

  /* the open satchel hangs down under the strip, full width, never over the words */
  html body.ps-on .ps-sat.open{top:calc(var(--ps-hh,44px) + 6px)!important;bottom:auto!important;left:8px!important;right:8px!important;
    max-height:calc(100dvh - var(--ps-hh,44px) - 200px)!important;transform:none!important}

  html body.ps-on .ps-sat.open .ps-bag{display:none!important}   /* × and a tap outside close it; the bag stays out of the picture */
}
