/* THE FOOT OF THE PICTURE (Eivind, 2026-10-08: "the useful here section clashes with the rest of the interface ... maybe without the
   background, or make the bottom of each image slightly dark to accommodate both satchel, items, and subtitles, most of the time").
   One soft, permanent darkening of the picture's lower edge, so the satchel, the thing in hand and the subtitles all stand on the
   same ground. Permanent, so it never comes and goes (the 2026-10-05 complaint was about a band that flickered). The slot beside the
   bag loses its card: no background, no border, no label. Since 2026-10-08 (later) it holds ONE thing, the item in hand. Linked last. */
html body.ps-on #stage::before{content:"";position:fixed;left:0;right:0;bottom:0;height:min(34vh,260px);z-index:5;pointer-events:none;
  background:linear-gradient(to top,rgba(8,6,12,.78) 0%,rgba(8,6,12,.55) 35%,rgba(8,6,12,.22) 70%,rgba(8,6,12,0) 100%)}
@media (max-width:699px) and (orientation:portrait){ html body.ps-on #stage::before{height:min(28vh,200px)} }
html body.ps-on.ps-clean #stage::before,html body.ps-on.co-open #stage::before{display:none}

html body.ps-on .ps-sat-hints{background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;padding:0 0 10px;gap:0}
html body.ps-on .ps-sat-hints > b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* for readers only */
html body.ps-on .ps-hint-slots{gap:8px;align-items:flex-end}
html body.ps-on .ps-hint-slots .ps-slot{width:calc(var(--sat-slot) * 1.1);filter:drop-shadow(0 3px 6px rgba(0,0,0,.7))}
/* the ticker word beside the thing: "Lantern / into the satchel", "Knife / in hand" */
html body.ps-on .ps-tick-w{display:flex;flex-direction:column;justify-content:center;font:600 11px/1.2 var(--ps-sans,system-ui);letter-spacing:.12em;text-transform:uppercase;color:#f0e4cc;text-shadow:0 1px 4px #000;padding-bottom:6px}
html body.ps-on .ps-tick-w small{font:italic 400 12px/1.2 var(--ps-serif,Georgia,serif);letter-spacing:0;text-transform:none;color:#d8b06a}
html body.ps-on .ps-slot.tick-in{animation:psTickIn .5s ease-out}html body.ps-on .ps-slot.tick-out{opacity:.55;filter:grayscale(.6) drop-shadow(0 3px 6px rgba(0,0,0,.7));animation:psTickOut .5s ease-out}
@keyframes psTickIn{from{transform:translateY(14px) scale(.6);opacity:0}}@keyframes psTickOut{from{transform:translateY(-10px);opacity:1}}
@media (max-width:699px){ html body.ps-on .ps-tick-w{font-size:10px} html body.ps-on .ps-tick-w small{font-size:11px} }
/* one thing in hand: room for it on every size (the old three-slot box was hidden under 1100 px for lack of room) */
@media (max-width:1099px){ html body.ps-on .ps-sat-hints:not([hidden]){display:flex} }
@media (max-width:699px){ html body.ps-on .ps-sat-hints:not([hidden]){display:flex} }

/* HEADER AND THE ? (Eivind, 2026-10-08, in-app comment: "so many setting buttons top right. put the question mark down to the right, easy
   to click with the thumb. settings include everything; the shortcut icons: autoplay/stop, story mode, narration on/off").
   The shortcuts are icon-only on every size (labels stay in the title for hover and readers). The TEXT fab goes: "Read the page" is a
   row in Settings. The ? sits in the bottom-right corner, on the opposite side from the satchel. */
html body.ps-on #psTextBtn{display:none!important}
html body.ps-on #psHintBtn{top:auto!important;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 4px);right:max(12px,env(safe-area-inset-right));left:auto;width:52px;height:52px;font-size:24px;z-index:12}
html body.ps-on.ps-jim-right #psHintBtn{right:auto;left:max(12px,env(safe-area-inset-left))}   /* satchel on the right: the ? takes the left corner */
/* PHONE CORNERS (Eivind, 2026-10-08: "squeeze the bag and the question mark down in the corners left and right for mobile, so we slightly
   see them and can click if we like, but mainly we click the subtitle and choices. We don't even have to see the full satchel, just the top").
   The folded bag sinks into the bottom-left corner with only its top third showing (the count badge stays up); the ? sinks into the
   bottom-right the same way, its counter moved to its top. The words and the choices get the middle, clear of both corners. */
@media (max-width:699px){
  html body.ps-on .ps-sat:not(.open){bottom:-46px;left:0;right:auto;z-index:12;align-items:flex-start}
  html body.ps-on.ps-jim-right .ps-sat:not(.open){left:auto;right:0;align-items:flex-end}
  html body.ps-on.ps-jim-left .ps-sat:not(.open) .ps-bag,html body.ps-on .ps-sat:not(.open) .ps-bag{margin:0 0 0 4px}
  html body.ps-on.ps-jim-right .ps-sat:not(.open) .ps-bag{margin:0 4px 0 0}
  html body.ps-on .ps-sat:not(.open) .ps-sat-line{margin-bottom:52px}      /* the sentence line stays readable above the sunk bag */
  html body.ps-on .ps-sat-hints{bottom:calc(var(--ps-bar) + 8px);left:8px;right:auto}   /* the ticker stands above the subtitle box, clear of the words */
  html body.ps-on.ps-jim-right .ps-sat-hints{left:auto;right:8px}
  /* opening it brings the bag up where the pane can stand on it, on the SAME side it was folded (Eivind: "do not move the satchel to the
     right side when we click it; opening is sufficient") */
  html body.ps-on .ps-sat.open{bottom:calc(var(--ps-bar) + 6px);right:auto;left:6px}
  html body.ps-on .ps-sat.open .ps-bag{align-self:flex-start;margin:0 0 6px 0}
  html body.ps-on.ps-jim-right .ps-sat.open{left:auto;right:6px}
  html body.ps-on.ps-jim-right .ps-sat.open .ps-bag{align-self:flex-end;margin:0 0 6px 0}
  html body.ps-on #psHintBtn{bottom:-18px;right:4px;width:46px;height:46px;font-size:20px;padding-bottom:16px}
  html body.ps-on.ps-jim-right #psHintBtn{right:auto;left:4px}
  html body.ps-on #psHintBtn .bd{top:-7px;bottom:auto}
  html body.ps-on #stage #card{padding-left:54px!important;padding-right:54px!important}   /* subtitles and choices between the two corners */
  html body.ps-on .ps-sat:not(.open),html body.ps-on #psHintBtn{opacity:.85}
}