/* STAGE LAYOUT (Eivind, 2026-10-07: "satchel down, swappable side; speakers up left, easy enough to tap"). Replaces phone-dock.css (the black bottom row is gone).
   - The people in the scene stand in a column at the TOP LEFT on every screen size (js/play-stage.js paintRail). The portrait tiles at the
     bottom edges are no longer drawn; their code still runs underneath.
   - The satchel stays at the bottom on the side chosen in Settings (js/stage-sides.js keeps that preference).
   - On a portrait phone the subtitle box is a fixed size (two lines + the speaker line), so the satchel, which stands on it, never jumps. */
#psCast .ps-face{display:none!important}
#psCast .ps-sat-gap,.ps-sat.face .ps-sat-gap{display:none!important}

#psRail{position:fixed;left:max(10px,env(safe-area-inset-left));top:calc(var(--ps-head,44px) + env(safe-area-inset-top) + 10px);z-index:8;
  max-width:calc(100vw - 86px);display:flex;flex-direction:column;gap:6px;align-items:flex-start;pointer-events:none}
#psRail.empty{display:none}
.ps-rrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ps-rchip{pointer-events:auto;display:block;margin:0;padding:0;border:0;background:none;color:inherit;cursor:pointer;border-radius:50%;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative}
/* a 44 px touch target around a 30 px icon */
.ps-rchip::before{content:'';position:absolute;inset:-4px}
.ps-rchip img{display:block;width:44px;height:44px;border-radius:50%;object-fit:cover;background:#222;border:2px solid #e0b873;
  box-shadow:0 2px 8px rgba(0,0,0,.7);transition:opacity .25s,filter .25s,border-color .25s,box-shadow .25s}
.ps-rchip.here img{border-color:#e0b873;filter:none;opacity:1}
.ps-rchip.sp img{border-color:#f3d48c;box-shadow:0 0 0 3px rgba(243,212,140,.4),0 0 14px rgba(243,212,140,.55)}
.ps-rchip:focus-visible img{outline:3px solid var(--ps-gold,#e0b873);outline-offset:2px}
.ps-rname{padding:3px 9px;border-radius:8px;background:rgba(12,9,16,.72);font:700 11px var(--ps-sans,system-ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ps-gold,#e0b873);text-shadow:0 1px 4px #000;white-space:nowrap}
.ps-rname[hidden]{display:none}
.ps-rname{transition:opacity .7s ease}.ps-rname.fade{opacity:0}
@media (min-width:1000px){ .ps-rchip img{width:60px;height:60px} #psRail{gap:8px} .ps-rrow{gap:10px} }
body.pc-open #psRail,body.ps-clean #psRail{display:none}

/* portrait phone: a fixed subtitle box, two lines plus the speaker line */
@media (max-width:699px) and (orientation:portrait){
  :root{--ps-lines:2}
  #psSubs:not(.on){display:block;visibility:hidden}
  #psSubs{min-height:calc(24px + 2 * var(--ps-sub) * 1.4 + 12px)}
}

/* STORY MODE (the eye button): nothing but the picture, the subtitles and the voice. Choices stay, because a story needs them. */
body.ps-clean .pl-head,body.ps-clean .ps-sat,body.ps-clean #psSatHints,body.ps-clean #psTextBtn,body.ps-clean #psHintBtn,body.ps-clean #psLinger,body.ps-clean #psToast,
body.ps-clean #psTip,body.ps-clean #settings,body.ps-clean #psCast{opacity:0!important;pointer-events:none!important;visibility:hidden}
body.ps-clean.ps-clean-nosubs #psSubs{opacity:0;pointer-events:none}
#pmShow{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:30;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(216,176,106,.4);background:rgba(12,9,16,.5);color:#f3e9d2;opacity:.38;cursor:pointer;display:none;align-items:center;justify-content:center;touch-action:manipulation}
#pmShow:hover,#pmShow:focus-visible{opacity:1}
body.ps-clean #pmShow{display:flex}
#pmShow svg{width:20px;height:20px}

/* the Text and ? buttons stand in a column at the TOP RIGHT, so the left edge belongs to the cast rail */
html body.ps-on #psTextBtn{left:auto;right:max(10px,env(safe-area-inset-right));top:calc(env(safe-area-inset-top) + var(--ps-head,44px) + 8px)}
html body.ps-on #psHintBtn{top:calc(env(safe-area-inset-top) + var(--ps-head,44px) + 60px)}

/* THE TEXT BAR STAYS PUT (Eivind, 2026-10-11: "let us make the clickable text bar sit more or less on the same spot ... when there is
   only one line or so"). The box always holds the speaker line and --ps-lines lines of text, and the words start at its top, so one
   line, three lines, a name or no name all begin at the same place; the bar never jumps up and down over the picture you are
   tapping. (The phone already had this; now every size does, and the name keeps its row even when empty.) */
html body.ps-on #psSubs{min-height:calc(24px + var(--ps-lines) * var(--ps-sub) * 1.4 + 12px);box-sizing:border-box}
html body.ps-on #psSubs:not(.on){display:block;visibility:hidden}
html body.ps-on #psSubs .ps-who[hidden]{display:block!important;visibility:hidden}
html body.ps-on #psSubs .ps-who:empty::before{content:'\00a0'}

/* THE TAP BUTTON (Eivind, 2026-10-11: "make an actual tap button rather than the small caret that blinks there ... slightly nicer
   looking and subtle"). A small round glass button at the right end of the text bar: a hairline gold rim, a chevron, no blinking.
   It only shows when a tap does something (next line, skip ahead, next page); hover/press brighten it. A tap on it is a tap on the
   words, so it does exactly what tapping the text does. */
html body.ps-on #psSubs .ps-next{position:absolute;right:4px;bottom:6px;width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid rgba(224,184,115,.45);background:rgba(14,10,18,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  color:#e9cf98;font-size:0;text-shadow:none;box-shadow:0 2px 8px rgba(0,0,0,.45);cursor:pointer;touch-action:manipulation;
  opacity:0;pointer-events:none;animation:none!important;transition:opacity .35s ease,background .2s,border-color .2s,transform .15s}
html body.ps-on #psSubs .ps-next svg{margin-left:1px}
html body.ps-on #psSubs.tap .ps-next{opacity:.85;pointer-events:auto}
html body.ps-on #psSubs.tap .ps-next:hover{opacity:1;background:rgba(224,184,115,.18);border-color:rgba(224,184,115,.8)}
html body.ps-on #psSubs.tap .ps-next:active{transform:scale(.94)}
@media (max-width:699px){ html body.ps-on #psSubs .ps-next{width:30px;height:30px;right:-42px;top:50%;bottom:auto;margin-top:-15px} }   /* phone: in the side margin beside the words, so they keep their full width */
html body.ps-still #psSubs .ps-next{transition:none}