/* LETTERBOX (Eivind, 2026-10-12, on a Game Boy screen: "now we have black boxes in this screen size. those black boxes are perfect to show
   characters down on the left side in desktop. the question mark thing is not so important ... let us take advantage of letterbox to show
   information"). js/play-stage.js (LETTERBOX section) measures the drawn picture and sets:
     --lb-top/--lb-bottom/--lb-left/--lb-right  the black bars (px; top counted from the header's foot), --lb-hb the header's foot
     body.ps-lb   a bar is big enough to use (desktop/tablet only; a phone keeps its own layout)
     body.ps-lb-b the bottom bar: faces bottom-left, their lines beside them, subtitles centred as before, satchel bottom-right
     body.ps-lb-s side bars only: faces and lines stacked down the left bar
     body.ps-lbf  a console picture FRAMED between the header and the subtitle band (--lb-pad-top/--lb-pad-bot), so the thin 16:10 bars
                  become one bottom bar that holds the subtitles, the faces and their words
   Painted (cover) pictures set none of these: today's layout is untouched. Linked last in play.html. */

/* the frame: padding on the img itself (its box, and so every overlay sized to #panel, stays put); the black shows in the padding */
html body.ps-on.ps-lbf #panel > img{box-sizing:border-box;padding:var(--lb-pad-top,44px) 0 var(--lb-pad-bot,150px)!important;background:#000}
/* (the foot gradient stays: over the black it is invisible, and when the choices lift the words onto the picture it keeps them readable) */

/* the weather belongs to the picture, not to the black around it */
html body.ps-on.ps-lb #panel :is(.st-sky,.st-flash,.st-grade,.st-dusk,.st-bolt){clip-path:inset(calc(var(--lb-hb,44px) + var(--lb-top,0px)) var(--lb-right,0px) var(--lb-bottom,0px) var(--lb-left,0px))}

/* ---- bottom bar: the cast row in the bottom-left corner of the bar ---- */
html body.ps-on.ps-lb-b #psRail{top:auto;bottom:max(14px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));
  flex-direction:row;align-items:center;max-width:calc(50vw - 40px)}
html body.ps-on.ps-lb-b .ps-rrow{flex-wrap:nowrap;gap:8px}
/* a little smaller in the bar, so their words have room beside them before the subtitles */
html body.ps-on.ps-lb-b .ps-rchip img{width:48px;height:48px}

/* the satchel takes the bottom-RIGHT corner while the faces own the left (folded and open on the same side: it never jumps across) */
@media (min-width:700px){
  html body.ps-on.ps-lb-b.ps-jim-left .ps-sat{left:auto;right:max(6px,env(safe-area-inset-right))}
  html body.ps-on.ps-lb-b.ps-jim-left .ps-sat:not(.open){align-items:flex-end}
  html body.ps-on.ps-lb-b.ps-jim-left .ps-bag{margin:0 10px 6px 0}
  html body.ps-on.ps-lb-b.ps-jim-left .ps-sat:not(.open) .ps-sat-line{align-self:flex-end;margin:0 10px 0 0}
  html body.ps-on.ps-lb-b.ps-jim-left .ps-sat-hints{left:auto;right:132px}
  html body.ps-on.ps-lb-b.ps-jim-left .ps-sat.open{left:auto;right:10px}
  html body.ps-on.ps-lb-b.ps-jim-left .ps-sat.open .ps-bag{align-self:flex-end;margin:0 10px 6px 0}
}

/* ---- side bars: the faces down the left bar ---- */
html body.ps-on.ps-lb-s #psRail{top:calc(var(--lb-hb,44px) + 38px);left:14px;max-width:calc(var(--lb-left) - 28px)}

/* ---- the lines in a bar: a little tighter, no entry slide (they are placed, not flown in) ---- */
html body.ps-lb #psLinger .pl-b{padding:6px 10px 7px}
html body.ps-lb #psLinger .pl-b b{margin-bottom:2px}
html body.ps-lb #psLinger .pl-b span{-webkit-line-clamp:2;font-size:14px;line-height:1.3}
html body.ps-lb #psLinger .pl-b.lbx{visibility:hidden}

/* ---- the round ? goes; its count is a quiet line in the bar (#psLbInfo .f, a button: the hint) ---- */
#psLbInfo{position:fixed;z-index:9;display:flex;gap:10px;align-items:baseline;pointer-events:none;
  font:600 11px/18px var(--ps-sans,system-ui);letter-spacing:.16em;text-transform:uppercase;color:rgba(224,184,115,.72);white-space:nowrap}
#psLbInfo[hidden]{display:none}
#psLbInfo .f{pointer-events:auto;margin:0;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer}
#psLbInfo .f[hidden]{display:none}
#psLbInfo.two .f::before{content:'·';margin-right:10px;color:rgba(224,184,115,.45)}
#psLbInfo .f:hover,#psLbInfo .f:focus-visible{color:var(--ps-gold,#e0b873);text-decoration:underline;text-underline-offset:3px;outline:none}
body.ps-clean #psLbInfo,body.pc-open #psLbInfo{visibility:hidden}

/* ==== THE STAGE (Eivind, 2026-10-12: "maybe the tooltip text goes into this field, top letterbox. and we can show persons on either side,
   and we can have conversations in between them, or other interaction"). body.ps-lbst (js/play-stage.js lbMeasure) on a console picture
   framed on a desktop/tablet window. Bands:
     top band    (--lb-hb .. picture top): the info line left; centred, the picture's answer #psTip or the aimed sentence #psLbAim
     bottom band (ps-lb-b): the choices (while they stand), the control row ‹ ›, the narration line, and the FLOOR (--lb-floor): the people as
                 cards on both sides (Jim's side = the satchel's side), the satchel a little in from the corner, the conversation between them
     side bars   (ps-lb-s, a wide window): each group rises in its own bar with its lines above it; the narration stays over the picture's foot
   Cards, lines and the satchel are placed by script (layoutCast / stageLines); this file dresses them. Painted and phones: untouched. */

/* the picture gives way smoothly when the band grows for the choices */
html body.ps-on.ps-lbst #panel > img{transition:padding .35s ease}
html body.ps-still.ps-lbst #panel > img{transition:none}
@media (prefers-reduced-motion:reduce){ html body.ps-on.ps-lbst #panel > img{transition:none} }

/* ---- top band: the answer box and the sentence, centred, steady ---- */
html body.ps-on.ps-lbst #psTip[data-side=fixed]{max-width:min(760px,calc(100vw - 520px));padding:5px 16px 6px;border-radius:12px;font-size:15px;line-height:1.3;
  background:rgba(20,15,27,.94);transform-origin:50% 50%}
html body.ps-on.ps-lbst #psTip b{font-size:10px;margin:0 0 2px;letter-spacing:.2em}
#psLbAim{display:none}
/* ---- the CARDS (body.ps-cards: on the stage AND in the painted screen, Eivind 2026-10-12: "the character portraits move DOWN beside the
   subtitles"; phones: a small row just above the subtitles): square-ish, rounded, a gold rim, placed by script (layoutCast / footCast).
   The speaker of the line in the subtitles is lit (bright rim, a little forward, name plate); the others rest dimmed; narration lights
   nobody. There is no speech text beside them any more: the subtitles carry the words. ---- */
html body.ps-on.ps-cards #psRail{top:0;left:0;right:auto;bottom:auto;width:0;height:0;max-width:none;overflow:visible}
html body.ps-on.ps-cards #psRail .ps-rname{display:none!important}
html body.ps-on.ps-cards .ps-rchip{position:fixed;border-radius:50%;transition:transform .25s ease,filter .25s ease}
html body.ps-on.ps-cards .ps-rchip img{width:var(--lb-cw,56px);height:var(--lb-ch,56px);border-radius:50%;object-fit:cover;object-position:50% 22%;
  border:2px solid #e0b873;box-shadow:0 6px 16px rgba(0,0,0,.6)}
html body.ps-on.ps-cards .ps-cnm{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);padding:2px 8px;border-radius:7px;white-space:nowrap;
  background:#1a1310;border:1px solid rgba(243,212,140,.85);font:700 9.5px var(--ps-sans,system-ui);letter-spacing:.16em;text-transform:uppercase;
  color:#f3d48c;opacity:0;transition:opacity .25s ease;pointer-events:none}
.ps-cnm{display:none}
html body.ps-on.ps-cards .ps-cnm{display:block}
/* who is talking NOW: lit and a little forward; the others rest dimmed. Pure narration: nobody lit, nobody dimmed. */
html body.ps-on.ps-cards #psRail.talking .ps-rchip:not(.sp){filter:brightness(.55)}
html body.ps-on.ps-cards #psRail.talking .ps-rchip:not(.sp) img{border-width:1px;border-color:rgba(224,184,115,.55)}
html body.ps-on.ps-cards .ps-rchip.sp{transform:translateY(-3px) scale(1.08);z-index:2}
html body.ps-on.ps-cards .ps-rchip.sp img{border:2.5px solid #f3d48c;box-shadow:0 0 0 3px rgba(243,212,140,.35),0 0 22px rgba(243,212,140,.55),0 8px 18px rgba(0,0,0,.6)}
html body.ps-on.ps-cards .ps-rchip.sp .ps-cnm{opacity:1}
html body.ps-still.ps-cards .ps-rchip,html body.ps-still.ps-cards .ps-cnm{transition:none}
@media (prefers-reduced-motion:reduce){ html body.ps-on.ps-cards .ps-rchip,html body.ps-on.ps-cards .ps-cnm{transition:none} }

/* ==== THE ROW (Eivind, 2026-10-12, as settled late that evening: "pls make portraits smaller, and the image full width. let us keep subs
   in the center, prev and next can be on the one right side, one on top of the other"; "choices appear in the subtitle area itself ...
   the last subtitle line stays, made smaller and dimmed just above the choices"; "beside the satchel: room for ONE item tile only").
   body.ps-row: the painted picture on a desktop/tablet (the row stands on its foot gradient, full screen) or the console stage's bottom band
   (the picture full width above it). js/play-stage.js lbMeasure/rowDims set --row-l/--row-r (the same room kept on both sides, so the words
   are centred on the window), --row-pad/--row-bot (the baseline), --row-bagw/--row-bagh/--row-right/--row-tiler/--row-ctlr; placeRow puts
   the cards. ps-rowr: the right cluster. ==== */

/* the subtitles: centred on the window, bottom-aligned on the baseline (more lines grow upward) */
html body.ps-on.ps-row #stage #card{padding:0 var(--row-r,260px) var(--row-subbot,var(--row-bot,14px)) var(--row-l,260px)!important;gap:6px}
html body.ps-on.ps-row #psSubs{--ps-lines:2;display:flex!important;flex-direction:column;justify-content:flex-end;box-sizing:border-box;
  min-height:calc(var(--ps-lines) * var(--ps-sub) * 1.4 + 4px);padding:0 2px!important;text-align:center}
html body.ps-on.ps-row #psSubs .ps-meas{left:2px;right:2px}
html body.ps-on.ps-row #psSubs .ps-who,html body.ps-on.ps-row #psSubs .ps-who[hidden]{display:none!important}   /* the lit card names the speaker */
html body.ps-on.ps-row #psSubs .ps-next{display:none!important}                                                  /* Next is in #psCtl */
/* a quote rising from its card is not repeated in the line (one place for each line); the box keeps its size */
html body.ps-on:is(.ps-row,.ps-lbst) #psSubs.keyed .ps-line:not(.ps-meas){visibility:hidden}

/* the CHOICES: UNDER the subtitles in a slot reserved at all times (css/band.css), so nothing rises when they come */

/* ---- the RIGHT: the satchel a little in from the corner, ONE item tile beside it (picture only), Prev over Next beside that ---- */
html body.ps-on.ps-rowr .ps-bag{width:var(--row-bagw,96px)!important;height:auto!important;margin:0!important}
html body.ps-on.ps-rowr .ps-bag .n{transform:scale(.85);transform-origin:100% 0}
html body.ps-on.ps-rowr .ps-sat{right:var(--row-right,24px)!important;left:auto!important;bottom:var(--row-bot,14px)!important}
html body.ps-on.ps-rowr .ps-sat:not(.open){flex-direction:column!important;align-items:flex-end!important;gap:0}
html body.ps-on.ps-rowr .ps-sat.open{right:var(--row-right,24px)!important}
html body.ps-on.ps-rowr .ps-sat.open .ps-bag{align-self:flex-end}
html body.ps-on.ps-rowr .ps-sat:not(.open) .ps-sat-line{display:none!important}   /* no text line beside the bag */
/* the held thing peeks out of the bag (js paintHeldPeek, .ps-heldpk: bigger than the other peeks, a gold glint; a tap = its close-up);
   things gained fly in from above and drop in, things given rise out (js flyItem, img.ps-fly). No tile or words beside the bag. */
html body.ps-on.ps-rowr #psSatHints{display:none!important}
.ps-heldpk{display:none}
html body.ps-on.ps-rowr .ps-heldpk:not([hidden]){display:block;position:fixed;z-index:13;width:50px;height:50px;padding:0;border:0;background:none;cursor:zoom-in;
  right:calc(var(--row-right,24px) + var(--row-bagw,90px) / 2 - 25px);bottom:calc(var(--row-bot,10px) + var(--row-bagh,74px) - 20px);transform:rotate(-10deg)}
html body.ps-on.ps-rowr .ps-heldpk img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 4px rgba(243,212,140,.85)) drop-shadow(0 3px 4px rgba(0,0,0,.7))}
html body.ps-on.ps-rowr .ps-heldpk:hover img{filter:drop-shadow(0 0 8px rgba(243,212,140,1)) drop-shadow(0 3px 4px rgba(0,0,0,.7))}
body.ps-bag-open .ps-heldpk,body.co-open .ps-heldpk,body.pc-open .ps-heldpk,body.ps-clean .ps-heldpk{visibility:hidden}
.ps-fly{position:fixed;left:0;top:0;width:56px;height:56px;z-index:60;pointer-events:none;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.7))}
/* the SCUMM sentence only while aiming at something: a small line at the top of the row, centred */
html body.ps-on.ps-row #psLbAim{display:block;position:fixed;z-index:9;left:var(--row-zone,240px);right:var(--row-zone,240px);bottom:calc(var(--row-bot,10px) + var(--row-h,74px) + 4px);
  text-align:center;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 11px/16px var(--ps-sans,system-ui);letter-spacing:.14em;
  text-transform:uppercase;color:#d6a76a;text-shadow:0 1px 3px #000,0 0 8px #000}
html body.ps-on.ps-row #psLbAim b{color:#f3d48c;font-weight:800;margin:0 .3em} html body.ps-on.ps-row #psLbAim i{font-style:normal;opacity:.8}
html body.ps-on.ps-row #psLbAim.empty{visibility:hidden}

/* (Prev/Next #psCtl: css/band.css) */

/* ---- DIALOGUE RISING into the picture from the speaker's card (js riseLines): one box per line, tail down to the card ---- */
html body.ps-on #psLinger .pl-b.rise{padding:7px 13px 8px;border-radius:12px;background:rgba(14,10,18,.88);animation:none}
html body.ps-on #psLinger .pl-b.rise b{display:block;font-size:9.5px;margin:0 0 2px}
html body.ps-on #psLinger .pl-b.rise span{-webkit-line-clamp:4;font-size:16px;line-height:1.32}
html body.ps-on #psLinger .pl-b.rise::after{content:'';position:absolute;left:calc(var(--tx,36px) - 6px);bottom:-6px;width:12px;height:12px;background:rgba(14,10,18,.95);
  transform:rotate(45deg);box-shadow:1.5px 1.5px 0 rgba(216,176,106,.35)}
html body.ps-on #psLinger .pl-b.rise.live::after{box-shadow:1.5px 1.5px 0 rgba(243,212,140,.8)}
html body.ps-on #psLinger .pl-b.rise.prev{opacity:.55}
html body.ps-on #psLinger .pl-b.rise.prev::after{content:none}
html body.ps-on #psLinger .pl-b.rise.lbx{visibility:hidden}

/* ---- CUTSCENES in the letterbox (Eivind, 2026-10-12: "in retro mode, when we have letterbox, let that also be for cutscenes"): the clip
   (js/cutscenes.js, video.cs-clip) plays inside the drawn picture (--lb-px/py/pw/ph from lbMeasure), never over the bands, so the people,
   the satchel, the controls and the choices stay. A console screen tints the clip toward its look with a CSS filter (cheap; it is not a
   real palette or pixel reduction of the video: that would need a per-frame canvas). */
html body.ps-on.ps-lb #panel > video.cs-clip{position:fixed!important;inset:auto!important;left:var(--lb-px)!important;top:var(--lb-py)!important;
  width:var(--lb-pw)!important;height:var(--lb-ph)!important;object-fit:cover!important}
html body.ps-on #panel:has(> img[data-disp-key*="|dmg"]:not(.panel-out)) > video.cs-clip{filter:grayscale(1) sepia(1) hue-rotate(38deg) saturate(2.6) contrast(1.35) brightness(.9)}
html body.ps-on #panel:has(> img[data-disp-key*="|c64_multi"]:not(.panel-out)) > video.cs-clip{filter:saturate(1.35) contrast(1.25) sepia(.15)}
html body.ps-on #panel:has(> img[data-disp-key*="|zx"]:not(.panel-out)) > video.cs-clip{filter:saturate(1.8) contrast(1.6)}
html body.ps-on #panel:has(> img[data-disp-key*="|playdate"]:not(.panel-out)) > video.cs-clip{filter:grayscale(1) contrast(2.2) brightness(1.05)}
/* (the pirate plaques for the choices were dropped 2026-10-12, late: choices, Next/rewind and the ? live in css/band.css) */