/* THE BAND, last pass (Eivind, 2026-10-12, late). Linked LAST in play.html; overrides only.
   1. CHOICES stacked above the subtitles (the line below never moves), centred, one per row, as long pills in the Next button's material
      (dark glass, thin gold ring, hover brighten, press-in, focus ring), plain serif. NO outcome hints: the engine's green/red classes,
      the coloured verb words and the gold dots are neutralised. Next during the choices takes autoplay's pick (play-menu.js takeChoice).
   2. Prev/Next (#psCtl): the small REWIND (↺) stacked ABOVE Next, clean gold line on dark glass (variant A of
      sketches/ctl-buttons-2026-10-12). While the narrator speaks or autoplay runs, Next shows soft gold waves inside the disc (CSS only).
   3. The ? (finds counter) is a bare glyph in the header row before the ship's wheel, its count a small badge. */

/* ---- 1. the choices: stacked ABOVE the subtitles, centred, one per row (Eivind, 2026-10-12, latest: "this type layout is nice. it gives us
   space for choice and also showing characters dialogue and we will not spam click the choices when we click through subtitles").
   #card stands on the bottom and grows upward, so the subtitle line below them never moves. (The reserved slot UNDER the subtitles was
   tried the same evening and dropped; --ch-slot stays 0.) ---- */
:root{--ch-slot:0px}
html body.ps-on #stage #card #choices:not(:has(> .menu)){order:-1;flex-direction:column!important;flex-wrap:nowrap!important;align-items:center!important;
  justify-content:flex-end;gap:8px!important;max-height:none;overflow:visible;background:none!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;margin:0 0 16px!important;padding:0!important}   /* air between the last pill and the label/subtitle under it (Eivind: too tight) */
html body.ps-on #stage #card #choices.ps-pair{flex-direction:column!important}
/* two SHORT choices (js classify: ps-pair) may stand side by side, but only while no dialogue bubble is up (body.ps-rise-up) */
html body.ps-on:not(.ps-rise-up) #stage #card #choices.ps-pair{flex-direction:row!important;justify-content:center!important;align-items:flex-end!important}
html body.ps-on:not(.ps-rise-up) #stage #card #choices.ps-pair > button{min-width:min(220px,46%)!important}
html body.ps-on #stage #card #choices > button,html body.ps-on #stage #card #choices.ps-dlg > button,html body.ps-on #stage #card #choices.ps-pair > button{
  flex:none!important;width:auto!important;min-width:min(300px,100%)!important;max-width:min(620px,100%)!important;min-height:36px!important;height:auto!important;margin:0!important;
  padding:7px 26px 8px!important;box-sizing:border-box;display:block!important;position:relative;white-space:normal;
  font:400 15px/1.3 var(--ps-serif,Georgia,serif)!important;font-style:normal!important;letter-spacing:0!important;text-align:center!important;color:#f2e6c9!important;
  background:rgba(12,9,16,.74)!important;border:0!important;border-radius:999px!important;
  box-shadow:inset 0 0 0 1px rgba(224,184,115,.55),0 2px 8px rgba(0,0,0,.55)!important;text-shadow:0 1px 2px #000;animation:none!important;transform:none!important;
  transition:color .15s,box-shadow .2s,background .2s,transform .1s;cursor:pointer;opacity:1}
@media (min-width:1100px){ html body.ps-on #stage #card #choices > button{font-size:16px!important} }
/* the same material as the Next button: dark glass, a thin gold ring line; hover brightens, press sinks 1px (.ps-press = Next taking it) */
html body.ps-on #stage #card #choices > button:hover{color:#fff1c8!important;background:rgba(32,24,30,.84)!important}
html body.ps-on #stage #card #choices > button:is(:active,.ps-press){transform:translateY(1px)!important;color:#fff1c8!important;background:rgba(40,30,34,.9)!important;
  box-shadow:inset 0 0 0 1.5px #f3d48c,0 1px 4px rgba(0,0,0,.55)!important}
html body.ps-on #stage #card #choices > button:focus-visible{outline:2px solid #f3d48c!important;outline-offset:3px}
/* no outcome hints of any kind: no coloured edges, arrows, dots, numbers or ticks; the first word is plain text */
html body.ps-on #stage #card #choices > button::before,html body.ps-on #stage #card #choices > button::after{content:none!important;display:none!important}
html body.ps-on #stage #card #choices > button:is(.green,.red,.main,.good,.bad,.ap-pick):not(:hover):not(:active):not(.ps-press){color:#f2e6c9!important}
html body.ps-on #choices > button .ps-v{font:inherit!important;color:inherit!important;letter-spacing:inherit!important;margin:0!important}
html body.ps-on #stage #card #choices.ps-dlg > button.picked{opacity:.6}
html body.ps-on #psText .ps-sch > button:is(.green,.red),#psBook button:is(.green,.red){border-left-color:rgba(216,176,106,.6)!important}
html body.ps-on #stage #card #choices > .finds-line{font:italic 13px/1.3 var(--ps-serif,Georgia,serif);padding:0}
/* phones: full width pills, the text may wrap */
@media (max-width:699px){
  html body.ps-on #stage #card #choices > button,html body.ps-on #stage #card #choices.ps-dlg > button,html body.ps-on #stage #card #choices.ps-pair > button{
    width:100%!important;min-width:0!important;max-width:none!important;font-size:15px!important;line-height:1.25!important;padding:7px 16px!important;border-radius:22px!important}
}

/* ---- 2. rewind over Next ---- */
#psCtl{display:none}
html body.ps-on.ps-rowr #psCtl{display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:4px;position:fixed;z-index:12;width:var(--row-ctlw,82px);
  right:var(--row-ctlr,140px);bottom:calc(var(--row-bot,10px) + (var(--row-h,56px) - var(--row-u,52px)) / 2)}
html body.ps-on.ps-rowr #psCtl button{display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;cursor:pointer;touch-action:manipulation;
  position:relative;border-radius:50%;-webkit-tap-highlight-color:transparent;transition:opacity .6s ease,background .2s,box-shadow .25s,color .2s,transform .1s}
html body.ps-on.ps-rowr #psCtl button svg{display:block;overflow:visible}
html body.ps-on.ps-rowr #psCtl button:active{transform:translateY(1px)}
html body.ps-on.ps-rowr #psCtl button:focus-visible{outline:2px solid #f3d48c;outline-offset:3px}
/* the rewind is SUBTLE (Eivind: "that old up button was nice, as it was super subtle"): a bare thin ↺, no disc, no ring, half opacity */
html body.ps-on.ps-rowr #psCtl .ps-prev{width:30px;height:20px;color:#e9cf98;background:none;box-shadow:none;border-radius:6px;opacity:.5;filter:drop-shadow(0 1px 2px rgba(0,0,0,.9))}
html body.ps-on.ps-rowr #psCtl .ps-prev svg{width:15px;height:15px}
html body.ps-on.ps-rowr #psCtl .ps-prev svg path{stroke-width:1.6}
html body.ps-on.ps-rowr #psCtl .ps-prev:hover{opacity:.85}
/* the first-line wait (js paintTap, REW_LOCK_MS) and nothing to go back to: very low, clicks ignored, fades back in quietly */
html body.ps-on.ps-rowr #psCtl .ps-prev.off{opacity:.14;cursor:default}
html body.ps-on.ps-rowr #psCtl .ps-prev.off:hover{opacity:.14}
html body.ps-on.ps-rowr #psCtl .ps-next{width:var(--row-u,48px);height:var(--row-u,48px);color:#e9cf98;background:rgba(12,9,16,.74);box-shadow:inset 0 0 0 1px rgba(224,184,115,.55),0 2px 8px rgba(0,0,0,.55)}
html body.ps-on.ps-rowr #psCtl .ps-next svg.g{width:20px;height:20px;margin-left:2px}
html body.ps-on.ps-rowr #psCtl .ps-next:hover{background:rgba(32,24,30,.84)}
html body.ps-on.ps-rowr #psCtl .ps-next[data-state=ready]{color:#fff1c8;box-shadow:inset 0 0 0 1.5px #f3d48c,0 0 14px rgba(243,212,140,.35),0 2px 8px rgba(0,0,0,.55)}
html body.ps-on.ps-rowr #psCtl .ps-next[data-state=none]{opacity:.3;pointer-events:none}
/* the WAVES: four soft rounded gold bars breathing slowly inside the disc (compositor-only transforms, ~0.6-0.9 Hz, low contrast) */
#psCtl .ps-next .wv{display:none}
html body.ps-on.ps-rowr #psCtl .ps-next:is([data-state=playing]) .wv,html body.ps-on.ps-ap.ps-rowr #psCtl .ps-next .wv{display:flex}
html body.ps-on.ps-rowr #psCtl .ps-next:is([data-state=playing]) svg.g,html body.ps-on.ps-ap.ps-rowr #psCtl .ps-next svg.g{display:none}
html body.ps-on.ps-ap.ps-rowr #psCtl .ps-next[data-state=none]{opacity:1;pointer-events:auto}
#psCtl .ps-next .wv{position:absolute;inset:0;align-items:center;justify-content:center;gap:3px;pointer-events:none}
#psCtl .ps-next .wv i{display:block;width:3px;height:16px;border-radius:2px;background:rgba(243,212,140,.78);transform:scaleY(.35);transform-origin:50% 50%;
  animation:psWave 1.5s ease-in-out infinite alternate}
#psCtl .ps-next .wv i:nth-child(2){animation-duration:1.15s;animation-delay:-.4s}
#psCtl .ps-next .wv i:nth-child(3){animation-duration:1.35s;animation-delay:-.9s}
#psCtl .ps-next .wv i:nth-child(4){animation-duration:1.7s;animation-delay:-.2s}
@keyframes psWave{0%{transform:scaleY(.3)}100%{transform:scaleY(1)}}
/* still: a static three-height glyph instead */
html body.ps-still #psCtl .ps-next .wv i{animation:none!important}
html body.ps-still #psCtl .ps-next .wv i:nth-child(1),html body.ps-still #psCtl .ps-next .wv i:nth-child(4){transform:scaleY(.45)}
html body.ps-still #psCtl .ps-next .wv i:nth-child(2){transform:scaleY(.9)} html body.ps-still #psCtl .ps-next .wv i:nth-child(3){transform:scaleY(.65)}
@media (prefers-reduced-motion:reduce){ #psCtl .ps-next .wv i{animation:none!important} #psCtl .ps-next .wv i:nth-child(2){transform:scaleY(.9)} #psCtl .ps-next .wv i:nth-child(3){transform:scaleY(.65)} }
body.ps-clean #psCtl,body.pc-open #psCtl,body.ps-bag-open #psCtl,body.co-open #psCtl{visibility:hidden}
body.ps-clean #psCtl .wv i,body.pc-open #psCtl .wv i,body.co-open #psCtl .wv i{animation-play-state:paused}

/* ---- 3. the ? in the header row (js placeHintBtn puts it before #menuBtn) ---- */
html body.ps-on .pl-head .pl-nav #psHintBtn{position:relative!important;inset:auto!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;
  z-index:auto;box-shadow:none!important;border-radius:0!important;padding:0!important;opacity:.78}
html body.ps-on .pl-head .pl-nav #psHintBtn[hidden]{display:none!important}
html body.ps-on .pl-head .pl-nav #psHintBtn:hover,html body.ps-on.ps-hinting .pl-head .pl-nav #psHintBtn{opacity:1;color:#e0b873}
html body.ps-on .pl-head .pl-nav #psHintBtn:focus-visible{outline:2px solid #e0b873;outline-offset:-4px}
html body.ps-on .pl-head .pl-nav #psHintBtn .bd{position:absolute;top:calc(50% - 19px);left:calc(50% + 3px);bottom:auto;right:auto;transform:none;min-width:14px;height:14px;
  padding:0 4px;border-radius:7px;box-sizing:border-box;background:#e0b873;color:#2a1c08;font:800 9px/14px var(--ps-sans,system-ui);letter-spacing:0;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.7)}
html body.ps-on .pl-head .pl-nav #psHintBtn.pop{animation:none}
@media (max-width:699px){ html body.ps-on .pl-head .pl-nav #psHintBtn .bd{top:auto;bottom:0;left:50%;transform:translateX(-50%);height:12px;min-width:12px;font-size:8px;line-height:12px;padding:0 3px} }   /* phone: under the glyph, clear of the wheel */

/* ---- 4. the RISING dialogue bubble's tail is part of the bubble (Eivind: "when we lift up the dialogue box, we should not separate from the
   triangle thing"): a ::after of the SAME element that moves, same opaque fill, real borders in the bubble's border width/colour, a 14 px
   rotated square at bottom:-6.5px so its side corners sit on the bubble's bottom border (no line across its base, no gap at the corners).
   js riseLines sets --tx (the speaker's head centre, clamped inside the rounded corners). Proof: tests/rise-tail.cjs (DSF 2). ---- */
html body.ps-on #psLinger .pl-b.rise{--bw:1px;--bc:rgba(216,176,106,.45);background:rgb(15,11,19);box-shadow:inset 0 0 0 var(--bw) var(--bc),0 6px 18px rgba(0,0,0,.45)}
html body.ps-on #psLinger .pl-b.rise.live{--bw:1.5px;--bc:rgba(243,212,140,.8)}
html body.ps-on #psLinger .pl-b.rise::after,html body.ps-on #psLinger .pl-b.rise.live::after{content:'';position:absolute;z-index:1;width:14px;height:14px;box-sizing:border-box;
  left:calc(var(--tx,36px) - 7px);bottom:-6.5px;background:rgb(15,11,19);border:solid var(--bc);border-width:0 var(--bw) var(--bw) 0;box-shadow:none;transform:rotate(45deg)}
html body.ps-on #psLinger .pl-b.rise.prev::after{content:none}
/* THIRDS (Eivind, 2026-10-15): the speaker's bubble is BIGGER (wider via js riseLines, larger type, more air) and the lit speaker's head grows more */
html body.ps-on.ps-row #psLinger .pl-b.rise{padding:10px 18px 12px;border-radius:14px}
html body.ps-on.ps-row #psLinger .pl-b.rise b{font-size:11.5px;margin:0 0 4px}
html body.ps-on.ps-row #psLinger .pl-b.rise span{font-size:19px;line-height:1.35;-webkit-line-clamp:5}
html body.ps-on.ps-row #psLinger .pl-b.rise.prev span{font-size:17px}
html body.ps-on.ps-row.ps-cards .ps-rchip.sp{transform:translateY(-6px) scale(1.18);transform-origin:50% 100%}   /* grows UP from its foot, never below the row */
html body.ps-on.ps-row.ps-cards .ps-cnm{bottom:4px}   /* the name plate sits on the head's lower edge: the heads stand on the window's foot, so under them is off screen */
/* NEXT IS A MARKER (Eivind, 2026-10-15: "we don't want the next button so big and prominent ... the subtitle is the next ... more of a marker"):
   a bare chevron like the rewind, no disc, no ring; ready = brighter with a soft glow; playing/autoplay = the small waves in its place.
   The #psCtl column is 72 px (js CTL_W) and sits on the row's middle line. */
html body.ps-on.ps-rowr #psCtl{bottom:calc(var(--row-bot,10px) + (var(--row-h,56px) - 36px) / 2);gap:6px}
html body.ps-on.ps-rowr #psCtl .ps-next,html body.ps-on.ps-rowr #psCtl .ps-next[data-state=ready],html body.ps-on.ps-rowr #psCtl .ps-next:hover{
  width:36px;height:36px;background:none;box-shadow:none;border-radius:8px;color:#e9cf98;opacity:.7;filter:drop-shadow(0 1px 2px rgba(0,0,0,.9))}
html body.ps-on.ps-rowr #psCtl .ps-next svg.g{width:24px;height:24px;margin-left:0}
html body.ps-on.ps-rowr #psCtl .ps-next svg.g path{stroke-width:1.8}
html body.ps-on.ps-rowr #psCtl .ps-next:hover{opacity:1}
html body.ps-on.ps-rowr #psCtl .ps-next[data-state=ready]{opacity:.95;color:#fff1c8;filter:drop-shadow(0 0 6px rgba(243,212,140,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.9))}
html body.ps-on.ps-rowr #psCtl .ps-next[data-state=none]{opacity:.25}
#psCtl .ps-next .wv i{height:14px;width:2.5px}

/* ---- 5. THE CURRENT ITEM (js paintTile): NO UI around it (Eivind: "there should not be any ui around the item, it should just be sitting
   beside the satchel"): the item's own picture with a soft drop shadow like the satchel's peeks, standing on the satchel's ground line
   between Next and the bag. Got / gave / held are told by MOTION only (drops in; lifts away and fades), never a badge. A click opens its
   full-screen close-up; hover brightens it a little. Phones: on the right above the words. ---- */
.ps-itile{display:none}
html body.ps-on .ps-itile:not([hidden]){display:block;position:fixed;z-index:12;width:var(--row-u,52px);height:var(--row-u,52px);padding:0;margin:0;border:0;background:none;box-shadow:none;cursor:pointer;
  right:var(--row-tiler,144px);bottom:var(--row-bot,10px);touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:filter .2s}
html body.ps-on:not(.ps-rowr) .ps-itile:not([hidden]){display:none}
html body.ps-on .ps-itile img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.7))}
html body.ps-on .ps-itile:hover{filter:brightness(1.15)}
html body.ps-on .ps-itile:focus-visible{outline:2px solid #f3d48c;outline-offset:3px;border-radius:8px}
html body.ps-on .ps-itile .bdg{display:none}
html body.ps-on.ps-rowr .ps-heldpk{display:none!important}   /* the item beside the bag shows the thing in hand now */
body.ps-clean .ps-itile,body.pc-open .ps-itile,body.ps-bag-open .ps-itile,body.co-open .ps-itile{visibility:hidden}
@media (max-width:699px){
  html body.ps-on:not(.ps-rowr) .ps-itile:not([hidden]){display:block;width:44px;height:44px;left:auto;right:max(10px,env(safe-area-inset-right));bottom:calc(var(--ps-bar,120px) + 10px)}
  html body.ps-on.ps-jim-right:not(.ps-rowr) .ps-itile:not([hidden]){right:auto;left:max(10px,env(safe-area-inset-left))}   /* the side away from the bag and the heads */
  html body.ps-on .ps-sat-hints{display:none!important}
}

/* a 390 px phone: six glyphs now (the ? joined the row), so they narrow to 32 px and the wheel to 38 px to stay inside the window */
@media (max-width:699px){ html body.ps-on .pl-head .pl-nav .ps-hb{width:32px!important;min-width:32px} html body.ps-on .pl-head .pl-nav #menuBtn{width:38px!important} }

/* ---- 6. WIDE DESKTOP: a narrower subtitle column (Eivind, 2026-10-12: "on long desktop we often get a single long line instead of narrower double lines").
   The strip is capped at about 26 em (~60 characters a line) and centred on the window; the chunker measures the same box (.ps-meas), so a page
   is cut into two shorter lines, never one long one. Narrow windows are unchanged (the cap is wider than their column). ---- */
html body.ps-on.ps-row #psSubs{width:min(100%,calc(var(--ps-sub,26px) * 26));margin-left:auto;margin-right:auto;align-self:center}

/* ---- 7. AUTOPLAY'S PICK, shown just before it is taken (Eivind, 2026-10-12: "when we do auto path, walkthrough mode, let us see a visual clue as to what
   choice is taken just before it is chosen"): the chosen pill lights up (gold ring, brighter glass, a soft breathing glow, a gold line filling along its
   foot over the 1.8 s) while the others dim a little. Only while autoplay marks one (.ap-pick, js play-menu.js tick); manual play and the Next button's
   own pick (.ps-press, 200 ms) are unchanged. Reduced motion: the ring and the fill stay, the breathing stops. ---- */
html body.ps-on #stage #card #choices > button.ap-pick{position:relative;overflow:hidden;color:#fff1c8!important;background:rgba(48,36,38,.94)!important;
  box-shadow:inset 0 0 0 2px #f3d48c,0 0 18px rgba(243,212,140,.45),0 2px 8px rgba(0,0,0,.55)!important;animation:apGlow 1.1s ease-in-out infinite}
html body.ps-on #stage #card #choices > button.ap-pick::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:100%;background:#f3d48c;transform-origin:0 50%;transform:scaleX(0);animation:apFill 1.8s linear forwards}
html body.ps-on #stage #card #choices:has(> button.ap-pick) > button:not(.ap-pick){opacity:.55;transition:opacity .3s}
@keyframes apGlow{50%{box-shadow:inset 0 0 0 2px #fff1c8,0 0 26px rgba(243,212,140,.7),0 2px 8px rgba(0,0,0,.55)}}
@keyframes apFill{to{transform:scaleX(1)}}
html body.ps-still #stage #card #choices > button.ap-pick{animation:none}
@media (prefers-reduced-motion:reduce){html body.ps-on #stage #card #choices > button.ap-pick{animation:none}}

html body.ps-on #psSubs .ps-who{margin:0 0 6px}   /* label a little off the words */

/* ORNAMENT (Eivind 2026-10-12: "some small slight ornament"): a tiny gold diamond set on the ring at each end of a choice pill, like studs on a strap. Quiet, brightens on hover. Not on the autoplay pick (its ::after is the fill bar). */
html body.ps-on #stage #card #choices > button{position:relative}
html body.ps-on #stage #card #choices > button:not(.ap-pick)::before,html body.ps-on #stage #card #choices > button:not(.ap-pick)::after{
  content:''!important;display:block!important;position:absolute!important;top:50%!important;bottom:auto!important;width:6px!important;height:6px!important;min-width:0!important;margin:-3px 0 0!important;padding:0!important;
  border:0!important;border-radius:0!important;transform:rotate(45deg)!important;clip-path:none!important;background:#c9a85a!important;opacity:.75;box-shadow:0 0 0 2px rgba(15,11,19,.92)!important;pointer-events:none;transition:opacity .2s}
html body.ps-on #stage #card #choices > button:not(.ap-pick)::before{left:-3px!important;right:auto!important}
html body.ps-on #stage #card #choices > button:not(.ap-pick)::after{right:-3px!important;left:auto!important}
html body.ps-on #stage #card #choices > button:hover::before,html body.ps-on #stage #card #choices > button:hover::after{opacity:1;background:#f3d48c!important}

/* PHONE FIXES from a real iPhone screenshot (2026-10-12): (1) the header's place name was cut to "T…" next to the brand: on phones the brand
   stays whole and the place name goes (it is still in the Settings and the book). (2) the folded satchel was 96 px wide and sunk below the
   edge, so the subtitle's second line ran over it and its badge, and only ~33 px of it could be tapped: it now stands whole in the corner at
   roughly half size inside the 54 px gutter, and the empty part of its box no longer eats taps meant for the words. */
@media (max-width:699px){
  html body.ps-on .pl-story .pl-where{display:none!important}
  html body.ps-on .pl-brand{white-space:nowrap}
  html body.ps-on .ps-sat:not(.open){bottom:calc(env(safe-area-inset-bottom) + 6px)!important;pointer-events:none}
  html body.ps-on .ps-sat:not(.open) .ps-bag{transform:scale(.56);transform-origin:0 100%;margin:0!important;pointer-events:auto}
  html body.ps-on.ps-jim-right .ps-sat:not(.open) .ps-bag{transform-origin:100% 100%;margin:0!important}
  html body.ps-on .ps-sat:not(.open) .ps-sat-line{margin-bottom:6px!important}
}