/* PLAY SCREEN — full-bleed picture, subtitles, thumb-zone choices, flanking portraits, satchel.
   Loaded AFTER the engine's /game/style.css (and site.css). Everything is scoped to body.ps-on (set by js/play-stage.js)
   and written as overrides of the engine's stylesheet; the engine itself is untouched. Engine layout rules are many and
   specific (hall grid, golden columns, tray), so the layout-critical declarations here carry !important on purpose.
   Layers: #panel (picture + hotspots) < faces/hud/toast < #card (subtitles + choices) ; header above ; sheets on top. */

:root{
  --ps-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Serif","Droid Serif",serif;
  --ps-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ps-sub:19px; --ps-lines:3; --ps-col:900px; --ps-bar:0px; --ps-head:44px; --ps-face:clamp(88px,25vw,168px);
  /* the satchel row under Jim's portrait: four slots, an arrow each side, the ▴ that opens it all */
  --sat-slot:50px; --sat-arrow:22px; --sat-row:calc(var(--sat-slot) + 12px);
  --sat-w:calc(4 * var(--sat-slot) + 3 * 6px + 3 * var(--sat-arrow) + 3 * 6px + 20px);
  --ps-ink:#f6efe0; --ps-gold:#e0b873; --ps-glass:rgba(16,12,22,.82);
}
@media (min-width:768px){ :root{ --ps-sub:21px; } }
@media (min-width:1100px){ :root{ --ps-sub:23px; } }
/* a short landscape phone: two-line subtitles, choices in two columns */
@media (orientation:landscape) and (max-height:520px){ :root{ --ps-sub:17px; --ps-lines:2; --ps-head:38px; --ps-face:clamp(64px,17vh,96px); } }
/* desktop: the portraits stand in the bottom corners, so the text column gives them room (they never sit over the subtitles) */
@media (min-width:1100px){ :root{ --ps-face:clamp(130px,13vw,200px); --sat-slot:clamp(52px,4.4vw,68px); --sat-arrow:24px;
  --ps-col:min(900px,calc(100vw - 2 * (max(var(--ps-face),var(--sat-w)) + 30px))); } }

html:has(body.ps-on),body.ps-on{height:100%;overflow:hidden;overscroll-behavior:none}
body.ps-on{background:#0b0910;-webkit-tap-highlight-color:transparent}

/* ---- the picture: the whole screen ------------------------------------------------------------------------------ */
html body.ps-on #stage{position:fixed!important;inset:0!important;z-index:6;width:auto!important;max-width:none!important;height:100dvh!important;
  min-height:0!important;margin:0!important;padding:0!important;display:block!important;overflow:hidden!important;gap:0!important;background:#0b0910}
html body.ps-on #stage[hidden]{display:none!important}
html body.ps-on #stage > #panel{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;min-height:0!important;
  aspect-ratio:auto!important;margin:0!important;border:0!important;border-radius:0!important;grid-area:auto!important}
html body.ps-on #panel > img{object-fit:cover!important;object-position:50% 38%}
/* a C64 / Spectrum / Game Boy / Playdate screen is shown whole: cropping it to fill would cut the machine's own frame and bend nothing back */
html body.ps-on #panel > img:is([data-disp-key*="|dmg"],[data-disp-key*="|c64_multi"],[data-disp-key*="|zx"],[data-disp-key*="|playdate"]){object-fit:contain!important;object-position:50% 50%;background:#000}
/* engine furniture that the new layout replaces (its data is read by play-stage.js; it keeps running, just unseen) */
html body.ps-on #tray,html body.ps-on #moreHint,html body.ps-on #satchel,html body.ps-on #tapHint,
html body.ps-on #card > #speaker,html body.ps-on #card > #text,html body.ps-on #card > #aside{display:none!important}

/* ---- slim translucent header -------------------------------------------------------------------------------------- */
html body.ps-on .pl-head{position:fixed;top:0;left:0;right:0;z-index:7;height:calc(var(--ps-head) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 60px 0 max(12px,env(safe-area-inset-left));gap:10px;border:0;
  background:linear-gradient(rgba(10,8,16,.82),rgba(10,8,16,.55) 60%,rgba(10,8,16,0));pointer-events:none;overflow:hidden}
html body.ps-on .pl-head > *{pointer-events:auto}
.ps-on .pl-brand{font-size:12px;letter-spacing:.2em;text-shadow:0 1px 4px #000}
.ps-on .pl-story{font-size:11px;letter-spacing:.06em;text-shadow:0 1px 4px #000}
.ps-on .pl-story .pl-where{margin-left:10px;opacity:.75;letter-spacing:.04em;text-transform:none}
.ps-on .pl-head .pl-nav{gap:8px;flex:none}
.ps-on .pl-head .pl-nav a,.ps-on .pl-head .pl-nav button{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 12px;
  background:rgba(14,10,20,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);font-size:11px;letter-spacing:.14em;white-space:nowrap}
.ps-on .pl-head .pl-nav button[hidden]{display:none!important}
/* narrow: Credits + Home move into the ☰ menu; Narration/Sound become icon buttons */
@media (max-width:719px){
  .ps-on .pl-head .pl-nav a{display:none!important}
  .ps-on .pl-story .pl-act{display:none}
  .ps-on .pl-story .pl-where{margin-left:0;font-size:10px}
}
@media (max-width:999px){
  .ps-on .pl-head .pl-nav button{font-size:0!important;letter-spacing:0;width:36px;min-width:36px;height:36px;min-height:36px;padding:0;position:relative}
  .ps-on #narrBtn::before{content:'🎙';font-size:16px}
  .ps-on #sndBtn::before{content:'🔊';font-size:16px}
  .ps-on #sndBtn[aria-pressed=false]::before{content:'🔇'}
  .ps-on #narrBtn[aria-pressed=false]{opacity:.55}
  .ps-on #narrBtn[aria-pressed=false]::after{content:'';position:absolute;left:8px;right:8px;top:50%;border-top:2px solid var(--red);transform:rotate(-40deg)}
}
/* the engine's ☰ orb, shrunk to live inside the slim header */
html body.ps-on #settings{top:calc(env(safe-area-inset-top) + 3px)!important;right:max(8px,env(safe-area-inset-right))!important}
html body.ps-on #settings #setBtn{width:38px!important;height:38px!important}
.ps-links{display:flex;gap:10px;margin:0 0 10px}
.ps-links a{flex:1;text-align:center;padding:12px;border:1px solid var(--line);border-radius:10px;color:var(--gold);text-decoration:none;
  font:600 12px var(--display);letter-spacing:.2em;text-transform:uppercase;background:var(--control)}

/* ---- the bottom bar: subtitles + choices over a soft gradient ------------------------------------------------------ */
html body.ps-on #stage #card{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;z-index:10;
  display:flex!important;flex-direction:column;justify-content:flex-end;gap:10px;margin:0!important;width:auto!important;max-height:none!important;
  padding:0 max(14px,env(safe-area-inset-right),calc((100% - var(--ps-col)) / 2)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left),calc((100% - var(--ps-col)) / 2))!important;
  border:0!important;border-radius:0!important;background:none!important;overflow:visible!important;min-height:0!important;
  -webkit-mask-image:none!important;mask-image:none!important;pointer-events:none;flex:none!important}
/* NO DARK BAND under the subtitles (the Professor, 2026-10-05: "it comes and goes and flickers. just drop shadow on the subs"): the band is gone;
   the words carry their own shadow, always the same, and the choices wear their own glass. */
html body.ps-on #stage #card::before{content:none;display:none}

#psSubs{display:block;opacity:0;pointer-events:none;transition:opacity .25s ease;position:relative;cursor:pointer;text-align:center;padding:8px 6px 2px;-webkit-user-select:none;user-select:none;
  touch-action:manipulation}
#psSubs.on{opacity:1;pointer-events:auto}
#psSubs .ps-who{font:700 12px var(--ps-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ps-gold);text-shadow:0 1px 4px #000;margin:0 0 3px}
#psSubs .ps-who[hidden]{display:none}
#psSubs .ps-line{font:400 var(--ps-sub)/1.4 var(--ps-serif);color:var(--ps-ink);text-shadow:0 1px 2px #000,0 2px 6px #000,0 0 14px rgba(0,0,0,.95),0 0 28px rgba(0,0,0,.8);
  text-wrap:balance;overflow-wrap:break-word;hyphens:manual;white-space:normal;min-height:1.4em}
#psSubs.quote .ps-line{font-style:italic}
#psSubs .ps-meas{visibility:hidden;height:0;overflow:hidden;margin:0;padding:0;position:absolute;left:6px;right:6px;pointer-events:none;text-wrap:wrap;font-style:normal}
#psSubs .ps-next{position:absolute;right:2px;bottom:-4px;color:var(--ps-gold);font-size:16px;text-shadow:0 1px 3px #000;opacity:0}
#psSubs.tap .ps-next{opacity:.9;animation:psPulse 1.4s infinite}
@keyframes psPulse{50%{opacity:.25}}

/* choices wait for the narration (a tap on the subtitles skips ahead); never hidden for good */
#card[data-phase=play] #choices{visibility:hidden;pointer-events:none;max-height:0!important;overflow:hidden;margin:0;padding:0}
html body.ps-on #stage #card #choices{pointer-events:auto;display:flex;flex-direction:column;gap:10px;margin:0!important;padding:0!important;
  max-height:min(272px,46dvh);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  flex:none!important;touch-action:pan-y}
html body.ps-on #stage #card #choices:empty{display:none}
html body.ps-on #stage #card #choices::before{content:none!important;display:none!important}
html body.ps-on #choices > button{animation:psIn .2s ease-out both!important;animation-delay:0s!important;position:relative;flex:none;box-sizing:border-box;width:100%;
  min-height:52px;padding:12px 18px;margin:0;text-align:center;font:600 17px/1.28 var(--ps-sans);letter-spacing:.01em;color:var(--ps-ink);
  background:rgba(34,28,46,.9);border:1.5px solid rgba(216,176,106,.6);border-left-width:5px;border-radius:12px;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.4);touch-action:manipulation}
html body.ps-on #choices > button::before{content:none!important}
html body.ps-on #choices > button:hover{background:rgba(52,42,68,.95);border-color:var(--ps-gold)}
html body.ps-on #choices > button:active{transform:translateY(1px);background:rgba(66,52,86,.96)}
html body.ps-on #choices > button:focus-visible{outline:3px solid var(--ps-gold);outline-offset:2px}
html body.ps-on #choices > button.green{border-left-color:#7fae8e}
html body.ps-on #choices > button.red{border-left-color:#cf6a52}
@keyframes psIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* exactly two short choices: side by side (left thumb / right thumb) */
html body.ps-on #stage #card #choices.ps-pair{flex-direction:row;max-height:none}
html body.ps-on #choices.ps-pair > button{flex:1 1 0;min-width:0;min-height:60px}
/* a short landscape phone: two columns so three choices still fit */
@media (orientation:landscape) and (max-height:520px){
  html body.ps-on #stage #card #choices{display:grid;grid-template-columns:1fr 1fr;max-height:min(calc(2 * 52px + 10px),52dvh)}
  html body.ps-on #choices > button{min-height:50px;padding:8px 14px;font-size:15px}
  html body.ps-on #stage #card{gap:6px}
}
/* DIALOGUE: spoken lines as a Monkey Island style list (rows, numbered, picked ones dimmed) */
html body.ps-on #stage #card #choices.ps-dlg{display:flex;flex-direction:column;gap:0;counter-reset:ln;background:rgba(14,10,20,.78);border:1px solid rgba(216,176,106,.35);
  border-radius:12px;max-height:min(calc(4 * 56px),46dvh);box-shadow:0 4px 14px rgba(0,0,0,.4)}
html body.ps-on #choices.ps-dlg > button{counter-increment:ln;display:flex;align-items:center;gap:10px;text-align:left;min-height:56px;border:0;border-radius:0;
  border-bottom:1px solid rgba(216,176,106,.2);background:transparent;box-shadow:none;font:italic 400 18px/1.3 var(--ps-serif);padding:10px 16px}
html body.ps-on #choices.ps-dlg > button:last-child{border-bottom:0}
html body.ps-on #choices.ps-dlg > button::before{content:counter(ln) '.'!important;font:700 15px var(--ps-sans);font-style:normal;color:var(--ps-gold);min-width:1.4em;flex:none}
html body.ps-on #choices.ps-dlg > button:hover,html body.ps-on #choices.ps-dlg > button:active{background:rgba(216,176,106,.16)}
html body.ps-on #choices.ps-dlg > button.picked{opacity:.55}
html body.ps-on #choices.ps-dlg > button.picked::after{content:'✓';margin-left:auto;color:var(--ps-gold);font-style:normal}
@media (orientation:landscape) and (max-height:520px){ html body.ps-on #stage #card #choices.ps-dlg{display:block;max-height:min(calc(3 * 48px),50dvh)} html body.ps-on #choices.ps-dlg > button{min-height:48px;font-size:16px} }
/* the END OF ACT card and the like: it owns the bar, so the last subtitle and the portraits step aside */
html body.ps-on #stage:has(#choices > .menu) #psCast,html body.ps-on #stage:has(#choices > .menu) #psSubs{display:none!important}
@media (orientation:landscape) and (max-height:520px){
  html body.ps-on #choices > .menu{padding:10px 16px;gap:8px}
  html body.ps-on #choices > .menu h1{font-size:22px;margin:0}
  html body.ps-on #choices > .menu table.fate,html body.ps-on #choices > .menu .carried,html body.ps-on #choices > .menu .finds{display:none}
}
html body.ps-on #choices > .menu{max-width:none;width:100%;background:rgba(20,16,28,.94);border:1.5px solid rgba(216,176,106,.5);border-radius:14px;padding:18px;
  box-shadow:0 8px 28px rgba(0,0,0,.55);animation:psIn .25s ease-out both}
html body.ps-on #choices > .menu button{min-height:52px;width:100%;padding:12px 18px;text-align:center;font:600 17px/1.28 var(--ps-sans);letter-spacing:.01em;color:var(--ps-ink);
  background:rgba(34,28,46,.9);border:1.5px solid rgba(216,176,106,.6);border-left-width:5px;border-radius:12px;cursor:pointer;animation:none}
html body.ps-on #choices > .menu button::before{content:none!important}
html body.ps-on #choices > .menu button.green{border-left-color:#7fae8e}
html body.ps-on #stage:has(#choices > .menu) #psTextBtn{display:none}
html body.ps-on #stage #card #choices:has(> .menu){max-height:calc(100dvh - var(--ps-head) - env(safe-area-inset-top) - 28px)}
html body.ps-on #choices .finds-line{text-align:center;color:var(--ps-gold);padding:2px 8px}

/* ---- portraits of whoever is in the room: at the picture's edges, two at most ------------------------------------------ */
#psCast{position:absolute;left:0;right:0;bottom:calc(var(--ps-bar) + 6px);height:0;z-index:5;pointer-events:none}
.ps-face{position:absolute;bottom:calc(var(--sat-row) + 10px);width:var(--ps-face);aspect-ratio:1;border-radius:14px;overflow:hidden;border:2px solid rgba(216,176,106,.45);
  background:#1b1624;box-shadow:0 6px 22px rgba(0,0,0,.6);opacity:.78;filter:saturate(.8) brightness(.85);transition:opacity .2s,filter .2s,transform .2s,bottom .2s}
.ps-face[hidden]{display:none}
/* portraits are buttons: #psCast is pointer-events:none, so each face turns clicks back on (Eivind, 2026-10-05: make portraits clickable again) */
.ps-face{pointer-events:auto;cursor:pointer}
.ps-face.left{left:max(6px,env(safe-area-inset-left))}
.ps-face.right{right:max(6px,env(safe-area-inset-right))}
.ps-face img{width:100%;height:100%;object-fit:cover;display:block}
/* Jim on the right faces into the room: his picture is mirrored (the Professor, 2026-10-05); the name under it stays readable */
.ps-face.right[data-key="jim"] img{transform:scaleX(-1)}
.ps-face .nm{position:absolute;left:0;right:0;bottom:0;padding:14px 4px 4px;text-align:center;color:var(--ps-ink);font:600 11px/1.15 var(--ps-sans);letter-spacing:.04em;
  background:linear-gradient(transparent,rgba(0,0,0,.78));text-shadow:0 1px 3px #000;white-space:normal;overflow:hidden}
.ps-face.speaking{opacity:1;filter:none;border-color:#f3d48c;transform:none;box-shadow:0 6px 22px rgba(0,0,0,.6),0 0 0 3px #f3d48c}
.ps-face.still{opacity:.92;filter:none}
@media (orientation:landscape) and (max-height:520px){ .ps-face{border-radius:10px} .ps-face .nm{font-size:10px;padding-top:10px} }
/* desktop (Eivind, 2026-10-05: "portraits down to bottom, not jumping around, but slightly enlarged when talking"): anchored to the
   screen's bottom corners, not to the subtitle bar, so they never ride up and down with it; nobody dims; the speaker grows a little */
@media (min-width:1100px){
  #psCast{bottom:max(16px,env(safe-area-inset-bottom));z-index:11}   /* above the subtitle bar's gradient, which now reaches them */
  .ps-face,.ps-face.still{opacity:1;filter:none;transition:transform .28s ease,border-color .28s,box-shadow .28s}
  .ps-face.speaking{transform:none}
}

/* ---- floating buttons: Text (top-left) and the satchel (top-right) -------------------------------------------------------- */
.ps-fab{position:absolute;z-index:12;display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0 14px;border-radius:999px;
  border:1.5px solid rgba(216,176,106,.55);background:var(--ps-glass);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--ps-ink);cursor:pointer;
  font:700 12px var(--ps-sans);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 4px 14px rgba(0,0,0,.45);touch-action:manipulation}
.ps-fab:hover{border-color:var(--ps-gold)}
.ps-fab:focus-visible{outline:3px solid var(--ps-gold);outline-offset:2px}
#psTextBtn{left:max(10px,env(safe-area-inset-left));top:calc(env(safe-area-inset-top) + var(--ps-head) + 6px)}
@keyframes psPop{40%{transform:scale(1.25)}}

/* ---- toast (what the world said, a new item) ---------------------------------------------------------------------------- */
#psToast{position:absolute;left:50%;bottom:calc(var(--ps-bar) + 68px);transform:translateX(-50%);z-index:11;max-width:min(92vw,560px);pointer-events:none;
  padding:9px 16px;border-radius:12px;background:var(--ps-glass);border:1px solid rgba(216,176,106,.5);color:var(--ps-ink);font:500 15px/1.35 var(--ps-serif);
  text-align:center;box-shadow:0 4px 16px rgba(0,0,0,.5);opacity:0;transition:opacity .2s}
#psToast.on{opacity:1}
#psToast b{color:var(--ps-gold);font-family:var(--ps-sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-right:6px}
/* the small description (Eivind, 2026-10-05): when an item or a person is clicked, the words stand UNDER the left portrait, not over the subtitles.
   When Jim's side is the left (body.ps-jim-left, from stage-sides.js) the satchel row is there, so the words go under the right portrait. A phone keeps the centred toast. */
#psToast{left:max(6px,env(safe-area-inset-left));right:auto;bottom:max(6px,env(safe-area-inset-bottom));transform:none;width:max(var(--ps-face),min(var(--sat-w),calc((100vw - var(--ps-col)) / 2 - 12px)));box-sizing:border-box;
  padding:6px 12px;border-radius:12px;text-align:left;font-size:15px;line-height:1.3;overflow:hidden;
  max-height:calc(var(--ps-bar) - 2px);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}   /* never taller than the band under the portrait */
#psToast b{display:inline;margin:0 7px 0 0;font-size:11px}
body.ps-jim-left #psToast{left:auto;right:max(6px,env(safe-area-inset-right))}
@media (max-width:599px){ #psToast,body.ps-jim-left #psToast{left:50%;right:auto;bottom:calc(var(--ps-bar) + 68px);transform:translateX(-50%);width:auto;max-width:min(92vw,560px);padding:9px 16px;
  border-radius:12px;text-align:center;font-size:15px;line-height:1.35;max-height:none;display:block;overflow:visible} #psToast b{display:inline;margin-right:6px;font-size:11px} }


/* ---- the satchel, v5 (Eivind, 2026-10-05: "keep jim's portrait on the right side usually, and others on the left ... hide jim when
   satchel is up. closed satchel, row of fours, and click item to open full and show in big style ... the full layer could cover exactly the
   portraits. and we want to move the chip style use x on... and just have a title of the item") -------------------------------------------
   Folded: four item icons floating on the darkened bottom under Jim, ‹ › page them (a +N count says how many sit beyond the four), ▴ at
   the end; the held item's NAME stands over the portrait where the chip used to be. A tap on an item holds it AND opens the satchel: one dark
   pane standing exactly where the portrait stood (Jim hides behind it), the chosen item big with its name and words, Look closer, the
   world's answer when it is tried; the row of four stays at the pane's foot so another can be picked. ▾ / the same item again / Esc fold it.
   No verbs, no scrim: the picture stays live. */
.ps-sat{position:absolute;right:max(6px,env(safe-area-inset-right));bottom:0;width:var(--sat-w);max-width:calc(100vw - 12px);
  display:flex;flex-direction:column;align-items:stretch;gap:6px;pointer-events:none;z-index:6;
  --sat-face:calc(var(--ps-face) + 10px);   /* the portrait's band over the row */
  --sat-room:calc(100dvh - var(--ps-bar) - 6px - 58px - var(--ps-head) - env(safe-area-inset-top))}   /* up to the ? button */
.ps-sat > *{pointer-events:auto}
/* folded: the held item's name over the portrait (no "Use X on…" chip any more), then room for the portrait itself */
.ps-sat-title{align-self:flex-end;max-width:100%;margin:0;padding:5px 10px;border-radius:8px;background:rgba(12,9,16,.78);color:var(--ps-gold);
  font:700 11px var(--ps-sans);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 0 0 1px rgba(216,176,106,.35)}
/* the gap stays: with no item held the title still takes its room (invisible), so nothing jumps when an item is pressed (Eivind, 2026-10-05) */
.ps-sat-title{min-height:calc(11px * 1.25 + 10px);box-sizing:border-box}
.ps-sat-title[hidden]{display:block;visibility:hidden}
.ps-sat-gap{display:none;height:var(--ps-face);pointer-events:none!important}
.ps-sat.face .ps-sat-gap{display:block}
.ps-sat.open .ps-sat-gap,.ps-sat.open .ps-sat-title{display:none}
.ps-sat-pane{display:flex;flex-direction:column;border-radius:14px;transition:background-color .2s,box-shadow .2s}
/* open: dark glass standing where the portrait stood (at least as tall as it plus the row); its words scroll if the room runs out */
.ps-sat.open .ps-sat-pane{min-height:calc(var(--sat-face) + var(--sat-row));max-height:max(calc(var(--sat-row) + 64px),var(--sat-room));
  background:rgba(12,9,16,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(216,176,106,.35),0 8px 24px rgba(0,0,0,.5)}
#psCast:has(.ps-sat.open) .ps-face.right{visibility:hidden}
@media (max-width:599px){ #psCast:has(.ps-sat.open) .ps-face.left{visibility:hidden} }   /* a phone: the pane spans both portrait spots */
.ps-sat-row{flex:none;display:flex;align-items:center;gap:6px;padding:6px 4px;height:var(--sat-row);box-sizing:border-box}
.ps-sat.open .ps-sat-row{border-top:1px solid rgba(216,176,106,.22)}
.ps-sat-arrow,.ps-sat-more{position:relative;flex:none;width:var(--sat-arrow);align-self:stretch;border:0;border-radius:6px;background:none;color:var(--ps-gold);
  font:700 22px/1 var(--ps-serif);cursor:pointer;padding:0;touch-action:manipulation;text-shadow:0 1px 4px #000}
.ps-sat-arrow:hover:not(:disabled),.ps-sat-more:hover{background:rgba(224,184,115,.14)}
.ps-sat-arrow:disabled{opacity:.2;cursor:default}
/* "+N": how many items sit beyond the four in view that way (playtests 2026-10-03: the arrows alone were missed, items clipped with no cue) */
.ps-sat-arrow[data-more]:not([data-more=""])::after{content:attr(data-more);position:absolute;top:0;right:-7px;min-width:17px;height:16px;padding:0 4px;box-sizing:border-box;
  border-radius:8px;background:var(--ps-gold);color:#241808;font:800 10px/16px var(--ps-sans);text-shadow:none;text-align:center;pointer-events:none}
.ps-sat-arrow.prev[data-more]:not([data-more=""])::after{right:auto;left:-7px}
.ps-sat-arrow:focus-visible,.ps-slot:focus-visible,.ps-sat-more:focus-visible{outline:3px solid var(--ps-gold);outline-offset:2px}
.ps-sat-slots{flex:none;width:calc(4 * var(--sat-slot) + 3 * 6px);display:grid;grid-auto-flow:column;grid-auto-columns:var(--sat-slot);gap:6px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.ps-sat-slots::-webkit-scrollbar{display:none}
.ps-slot{position:relative;aspect-ratio:1;scroll-snap-align:start;display:grid;place-items:center;border:0;border-radius:10px;background:none;color:var(--ps-ink);cursor:pointer;padding:0;touch-action:manipulation}
.ps-slot.ghost{cursor:default}
.ps-slot img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.75))}
/* hover and held (Eivind, 2026-10-05: "don't expand, just show line around, not glow, just a proper outline"): a gold line drawn inside the slot */
.ps-slot:hover:not(.ghost){box-shadow:inset 0 0 0 2px rgba(224,184,115,.6)}
.ps-slot[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ps-gold)}
.ps-sat-more{font-size:15px}
.ps-sat.open .ps-sat-more{background:rgba(224,184,115,.14)}
.ps-sat.empty .ps-sat-row{opacity:.6}
.ps-sat.pop .ps-sat-row{animation:psPop .5s ease-out}
/* the big view: the item's picture beside its name, words and Look closer; under them the world's answer */
.ps-sat-all{flex:0 1 auto;min-height:0;padding:12px 14px 10px;overflow-y:auto;overscroll-behavior:contain;font:400 15px/1.45 var(--ps-serif);color:var(--ps-ink);animation:psUp .2s ease-out}
.ps-sat-all[hidden]{display:none}
.ps-sat-all .ps-big{display:flex;gap:12px;align-items:flex-start}
.ps-sat-all .ps-bigimg{flex:none;width:clamp(96px,9vw,132px);aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.75))}
.ps-sat-all .ps-bigimg[hidden],.ps-sat-all .ps-iname[hidden],.ps-sat-all .ps-ans[hidden]{display:none}
.ps-sat-all .ps-bigtxt{flex:1;min-width:0}
.ps-sat-all .ps-iname{display:block;font:700 13px var(--ps-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ps-gold)}
.ps-sat-all .ps-idesc{margin:4px 0 0;min-height:0;font-style:italic;font-size:14px}
.ps-sat-all .ps-use{margin-top:8px;min-height:36px;font-size:11px}
.ps-sat-all .ps-ans{margin:10px 0 0;padding-top:8px;border-top:1px solid rgba(216,176,106,.3);font:400 15px/1.4 var(--ps-serif)}
.ps-sat-all .ps-ans b{color:var(--ps-gold);font:700 11px var(--ps-sans);letter-spacing:.16em;text-transform:uppercase;margin-right:6px}
body.ps-bag-open #psToast{opacity:0!important}
/* desktop: the column stands on the screen's bottom edge (see #psCast above), so the room is measured from there */
@media (min-width:1100px){ .ps-sat{--sat-room:calc(100dvh - 16px - 58px - var(--ps-head) - env(safe-area-inset-top))} }
/* a short landscape phone: no big picture of the item */
@media (orientation:landscape) and (max-height:520px){ .ps-sat-all .ps-bigimg{display:none} .ps-sat-all{padding:8px 12px 4px} }

/* ---- sheets: Text --------------------------------------------------------------------------------------------------- */
#psScrim{position:absolute;inset:0;z-index:30;background:rgba(5,4,9,.55)}
#psScrim[hidden]{display:none}
.ps-sheet{position:absolute;left:0;right:0;bottom:0;z-index:31;margin:0 auto;width:min(100%,var(--ps-col));max-height:78dvh;display:flex;flex-direction:column;
  background:#1d1727;border:1.5px solid rgba(216,176,106,.5);border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.6);
  padding-bottom:env(safe-area-inset-bottom);animation:psUp .22s ease-out}
.ps-sheet[hidden]{display:none}
@keyframes psUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.ps-sheet > header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 8px 18px}
.ps-sheet > header b{font:700 12px var(--ps-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ps-gold)}
.ps-sheet .ps-x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--control);color:var(--ps-ink);font-size:18px;cursor:pointer}
.ps-sheet .ps-sbody{overflow-y:auto;padding:4px 20px 22px;font:400 18px/1.62 var(--ps-serif);color:var(--ps-ink);overscroll-behavior:contain}
.ps-sheet .ps-sbody p{margin:0 0 .9em}
.ps-sheet .ps-sbody .aside{color:var(--dim);font-style:italic;font-size:15px}
.ps-idesc{margin:14px 0 0;min-height:2.6em;color:var(--ps-ink);font-style:italic}
.ps-use{margin-top:10px;min-height:48px;padding:0 20px;border-radius:12px;border:1.5px solid var(--ps-gold);background:rgba(216,176,106,.18);color:var(--ps-ink);
  font:700 13px var(--ps-sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.ps-empty{color:var(--dim);font-style:italic;margin:6px 0}

/* wide screens: the picture stays full-bleed, the text column is capped (see --ps-col) */
@media (min-width:1100px){ #psSubs{padding-top:12px} html body.ps-on #choices > button{font-size:18px} }

@media (prefers-reduced-motion:reduce){
  #psSubs.tap .ps-next{animation:none}
  html body.ps-on #choices > button,html body.ps-on #choices > .menu{animation:none!important}
  .ps-face,#psToast,.ps-sheet,.ps-sat.pop .ps-sat-row,.ps-sat-pane,.ps-sat-all{transition:none;animation:none}
}
/* twin: in-game motion switch */
html body.ps-still #psSubs.tap .ps-next{animation:none}
html body.ps-still.ps-on #choices > button,html body.ps-still.ps-on #choices > .menu{animation:none!important}
html body.ps-still .ps-face,html body.ps-still #psToast,html body.ps-still .ps-sheet,html body.ps-still .ps-sat.pop .ps-sat-row,html body.ps-still .ps-sat-pane,html body.ps-still .ps-sat-all{transition:none;animation:none}

/* ---- discovery: the ? hint, the tap ripple, the satchel's found line ----------------------------------------------------- */
#psHintBtn{right:max(10px,env(safe-area-inset-right));top:calc(env(safe-area-inset-top) + var(--ps-head) + 6px);width:46px;height:46px;padding:0;font-size:22px;letter-spacing:0}
#psHintBtn[hidden]{display:none}
#psHintBtn .bd{position:absolute;top:auto;bottom:-8px;left:50%;right:auto;transform:translateX(-50%);min-width:16px;height:16px;padding:0 6px;border-radius:8px;background:var(--ps-gold);color:#2a1c08;font:800 10px/16px var(--ps-sans);letter-spacing:0;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.5)}
#psHintBtn.pop{animation:psPop .5s ease-out}
body.ps-hinting #psHintBtn{border-color:var(--ps-gold);box-shadow:0 0 0 3px rgba(224,184,115,.4),0 4px 14px rgba(0,0,0,.45)}
/* the engine draws every zone's outline on its hotspot canvas while body.show-hotspots is set; here they pulse for a moment */
body.ps-hinting #panel .hotspots canvas.hs-lines{animation:psHint 1s ease-in-out infinite;filter:drop-shadow(0 0 3px rgba(120,220,255,.9))}
@keyframes psHint{0%,100%{opacity:.35}50%{opacity:1}}
#psRipples{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden}
.ps-ripple{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid rgba(255,255,255,.7);opacity:0;animation:psRip .55s ease-out}
.ps-ripple.hit{border-color:var(--ps-gold);border-width:3px;box-shadow:0 0 12px rgba(224,184,115,.7)}
@keyframes psRip{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(6)}}
.ps-btnrow{display:flex;flex-wrap:wrap;gap:10px}
.ps-found{margin:16px 0 0;font:600 11px var(--ps-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
/* a window wider than the picture crops top and bottom: keep it centred, as the engine's zone layer assumes */
@media (min-aspect-ratio:1023/576){ html body.ps-on #panel > img{object-position:50% 50%!important} }
@media (prefers-reduced-motion:reduce){ body.ps-hinting #panel .hotspots canvas.hs-lines,.ps-ripple{animation:none} .ps-ripple{display:none} }
/* twin: in-game motion switch */
html body.ps-still.ps-hinting #panel .hotspots canvas.hs-lines,html body.ps-still .ps-ripple{animation:none}
html body.ps-still .ps-ripple{display:none}

/* ---- the page's choices at the foot of the Text sheet (same looks as the real ones) --------------------------------------- */
#psText .ps-sch{flex:none;display:flex;flex-direction:column;gap:10px;max-height:50%;overflow-y:auto;overscroll-behavior:contain;padding:12px 16px 16px;border-top:1px solid rgba(216,176,106,.3);background:rgba(10,8,16,.5)}
#psText .ps-sch[hidden]{display:none}
#psText .ps-sch > button{flex:none;box-sizing:border-box;width:100%;min-height:52px;padding:12px 18px;margin:0;text-align:center;font:600 17px/1.28 var(--ps-sans);letter-spacing:.01em;color:var(--ps-ink);
  background:rgba(34,28,46,.9);border:1.5px solid rgba(216,176,106,.6);border-left-width:5px;border-radius:12px;cursor:pointer;touch-action:manipulation}
#psText .ps-sch > button:hover{background:rgba(52,42,68,.95);border-color:var(--ps-gold)}
#psText .ps-sch > button:active{background:rgba(66,52,86,.96)}
#psText .ps-sch > button:focus-visible{outline:3px solid var(--ps-gold);outline-offset:2px}
#psText .ps-sch > button.green{border-left-color:#7fae8e}
#psText .ps-sch > button.red{border-left-color:#cf6a52}
#psText .ps-sch.ps-pair{flex-direction:row}
#psText .ps-sch.ps-pair > button{flex:1 1 0;min-width:0;min-height:60px}
#psText .ps-sch.ps-dlg{gap:0;counter-reset:ln;background:rgba(14,10,20,.78)}
#psText .ps-sch.ps-dlg > button{counter-increment:ln;display:flex;align-items:center;gap:10px;text-align:left;min-height:56px;border:0;border-radius:0;border-bottom:1px solid rgba(216,176,106,.2);
  background:transparent;font:italic 400 18px/1.3 var(--ps-serif);padding:10px 16px}
#psText .ps-sch.ps-dlg > button:last-child{border-bottom:0}
#psText .ps-sch.ps-dlg > button::before{content:counter(ln) '.';font:700 15px var(--ps-sans);font-style:normal;color:var(--ps-gold);min-width:1.4em;flex:none}
#psText .ps-sch.ps-dlg > button.picked{opacity:.55}
#psText .ps-sch.ps-dlg > button.picked::after{content:'✓';margin-left:auto;color:var(--ps-gold);font-style:normal}
@media (orientation:landscape) and (max-height:520px){ #psText .ps-sch > button{min-height:48px;font-size:15px;padding:8px 14px} #psText .ps-sch{max-height:56%} }

/* portraits: one size for everyone, no scaling when someone speaks (a yellow outline says who), and two of them always fit: on a narrow screen they shrink together */
:root{--ps-face:clamp(72px,min(21vw,17vh),168px)}
@media (min-width:1100px){ :root{ --ps-face:clamp(120px,min(12vw,20vh),190px) } }
@media (orientation:landscape) and (max-height:520px){ :root{ --ps-face:clamp(60px,17vh,92px) } }
.ps-face,.ps-face.speaking{transform:none!important}
/* ONE PERSON ON THE LEFT (the Professor, 2026-10-05): with nobody on the right the single portrait is a size bigger. The size is fixed per page
   (no transition), so it never breathes up and down; it is still a button with the same corner. */
#psCast:not(:has(.ps-face.right:not([hidden]))) .ps-face.left{width:calc(var(--ps-face) * 1.3);transition:opacity .2s,filter .2s}
/* THE ONE WHO SPEAKS: the gold ring breathes slowly (glow only, never size) */
.ps-face.speaking{animation:psSpeak 2.2s ease-in-out infinite}
@keyframes psSpeak{0%,100%{box-shadow:0 6px 22px rgba(0,0,0,.6),0 0 0 3px #f3d48c,0 0 0 rgba(243,212,140,0)}50%{box-shadow:0 6px 22px rgba(0,0,0,.6),0 0 0 3px #f3d48c,0 0 22px 6px rgba(243,212,140,.45)}}
@media (prefers-reduced-motion:reduce){ .ps-face.speaking{animation:none} }
/* twin: in-game motion switch */
html body.ps-still .ps-face.speaking{animation:none}
@media (orientation:landscape) and (max-height:520px){ .ps-sat-all .ps-use{min-height:30px} }

/* ---- THE SATCHEL v6 (the Professor, 2026-10-05) ------------------------------------------------------------------------------------
   THE LINE at the top of everything, always, at one height: the sentence that builds, SCUMM style ("Use knife with …", "Give coins to
   Billy Bones"). Nothing under it ever jumps. The satchel reaches the screen's bottom edge. The × sits in the pane's corner; a click away
   folds it. Beside the folded satchel: USEFUL HERE, up to three things this picture has an answer for. */
.ps-sat-title,.ps-hand{display:none!important}
.ps-sat-line{flex:none;height:34px;box-sizing:border-box;padding:8px 12px 0;border-radius:10px 10px 0 0;background:rgba(12,9,16,.82);
  box-shadow:inset 0 0 0 1px rgba(216,176,106,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font:600 11px var(--ps-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ps-gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-sat-line i{font-style:normal;opacity:.7}
.ps-sat-line b{font-weight:800;color:#fff1b4}
.ps-sat-line.dim{color:var(--ps-ink)} .ps-sat-line.dim b{color:var(--ps-ink);opacity:.6;font-weight:600}
.ps-sat-line.aimed{box-shadow:inset 0 0 0 1px rgba(243,212,140,.85)}
/* the line is in the column above the portrait's room: both states keep it, so only the pane changes between fold and open */
.ps-sat{gap:0;bottom:calc(-1 * var(--ps-bar) - 6px + env(safe-area-inset-bottom));right:0;max-width:100vw}
.ps-sat.open .ps-sat-gap{display:none}
.ps-sat-pane{border-radius:0 0 0 14px}
.ps-sat.open .ps-sat-pane{border-radius:0;position:relative}
.ps-sat.open .ps-sat-row{margin-top:auto}
.ps-sat .ps-sat-row{padding-bottom:max(6px,env(safe-area-inset-bottom))}
.ps-sat:not(.open) .ps-sat-row{background:rgba(12,9,16,.82);box-shadow:inset 0 0 0 1px rgba(216,176,106,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* the × in the pane's corner (no ▾ any more) */
.ps-sat-more{position:absolute;top:4px;right:4px;z-index:2;width:30px;height:30px;align-self:auto;border-radius:50%;font-size:14px;background:rgba(12,9,16,.6)}
.ps-sat-more[hidden]{display:none}
.ps-sat.open .ps-sat-more{background:rgba(12,9,16,.6)}
.ps-sat.open .ps-sat-all{padding-right:40px}
/* the magnifier: a round button under the item's words, bottom right of the big view */
.ps-sat-all .ps-big{position:relative;padding-bottom:4px}
.ps-sat-all .ps-use.ps-look{position:absolute;right:-28px;bottom:-2px;min-height:0;width:38px;height:38px;padding:0;margin:0;border-radius:50%;display:grid;place-items:center}
.ps-sat-all .ps-use.ps-look[hidden]{display:none}
/* USEFUL HERE: beside the folded satchel, same glass, three slots at most; gone while the satchel is open or on a narrow phone */
.ps-sat-hints{position:absolute;right:calc(var(--sat-w) + 8px);bottom:calc(-1 * var(--ps-bar) - 6px + env(safe-area-inset-bottom));z-index:6;pointer-events:auto;
  display:flex;flex-direction:column;gap:4px;padding:6px 8px max(6px,env(safe-area-inset-bottom));border-radius:14px 14px 0 0;background:rgba(12,9,16,.82);box-shadow:inset 0 0 0 1px rgba(216,176,106,.35);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ps-sat-hints[hidden],body.ps-bag-open .ps-sat-hints{display:none}
.ps-sat-hints > b{font:600 9px var(--ps-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ps-gold);opacity:.8;white-space:nowrap}
.ps-hint-slots{display:flex;gap:6px}
.ps-hint-slots .ps-slot{width:calc(var(--sat-slot) * .8)}
@media (max-width:699px){ .ps-sat-hints{display:none} }
/* a lit lantern wears a small flame mark in the strip */
.ps-slot.lit::after{content:"";position:absolute;top:5px;right:5px;width:11px;height:11px;border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;background:radial-gradient(circle at 50% 70%,#fff6c2 0,#ffc247 55%,#ff8a1f 100%);box-shadow:0 0 6px 2px rgba(255,170,60,.65)}

/* no yellow outline over the picture: the hotspot lines show only while the ? hint is pulsing (Eivind, 2026-10-05) */
body:not(.ps-hinting) #panel .hotspots canvas.hs-lines{opacity:0}
/* ---- THE ANSWER BUBBLE (js/play-stage.js, #psTip; Eivind, 2026-10-07: "Can't the text just follow our pointer around?") ----------------
   The world's answer to a tap on the picture or a portrait: a speech bubble at the tap, a small tail pointing at the spot (data-side says
   where the bubble stands: above / below / right / left of it, --tx / --ty where the tail sits). The script keeps it inside the stage and
   clear of the portraits, the satchel and the bottom bar; with a mouse it follows the pointer. Same gold label as the toast. */
#psTip{position:fixed;left:0;top:0;z-index:40;pointer-events:none;box-sizing:border-box;width:max-content;max-width:min(320px,calc(100vw - 24px));
  padding:9px 14px 10px;border-radius:14px;background:rgb(20,15,27);border:1.5px solid rgba(216,176,106,.75);color:var(--ps-ink);
  font:500 15px/1.36 var(--ps-serif);text-align:left;box-shadow:0 8px 22px rgba(0,0,0,.55);--tx:50%;--ty:50%}
#psTip[hidden]{display:none}
#psTip b{display:block;margin:0 0 3px;color:var(--ps-gold);font:700 11px var(--ps-sans);letter-spacing:.16em;text-transform:uppercase}
#psTip .ps-tail{position:absolute;z-index:1;width:14px;height:14px;background:rgb(20,15,27);border:1.5px solid rgba(216,176,106,.75);box-sizing:border-box;transform:rotate(45deg)}
#psTip[data-side=above] .ps-tail{left:calc(var(--tx) - 7px);bottom:-6.5px;border-width:0 1.5px 1.5px 0;clip-path:polygon(100% 0,100% 100%,0 100%)}
#psTip[data-side=below] .ps-tail{left:calc(var(--tx) - 7px);top:-6.5px;border-width:1.5px 0 0 1.5px;clip-path:polygon(0 0,100% 0,0 100%)}
#psTip[data-side=right] .ps-tail{top:calc(var(--ty) - 7px);left:-6.5px;border-width:0 0 1.5px 1.5px;clip-path:polygon(0 0,100% 100%,0 100%)}
#psTip[data-side=left] .ps-tail{top:calc(var(--ty) - 7px);right:-6.5px;border-width:1.5px 1.5px 0 0;clip-path:polygon(0 0,100% 0,100% 100%)}
#psTip.pop{animation:psBub .16s ease-out}
#psTip[data-side=above]{transform-origin:var(--tx) 100%} #psTip[data-side=below]{transform-origin:var(--tx) 0}
#psTip[data-side=right]{transform-origin:0 var(--ty)} #psTip[data-side=left]{transform-origin:100% var(--ty)}
@keyframes psBub{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
body.ps-bag-open #psTip,body.co-open #psTip{display:none}
@media (prefers-reduced-motion:reduce){ #psTip.pop{animation:none} }
/* twin: in-game motion switch */
html body.ps-still #psTip.pop{animation:none}

/* ---- the toast (a new thing in the satchel, the lantern, the ? hint) stands at the TOP centre, between the Text and ? buttons, never
   over the portraits in the bottom corners (2026-10-07). Two ids: beats satchel-leather.css's bottom offset. */
html body.ps-on #stage #psToast{left:50%;right:auto;top:calc(env(safe-area-inset-top) + var(--ps-head) + 8px);bottom:auto;transform:translateX(-50%);
  width:max-content;max-width:min(560px,calc(100vw - 2 * 88px));box-sizing:border-box;max-height:none;display:block;overflow:visible;-webkit-line-clamp:unset;
  padding:9px 16px;border-radius:12px;text-align:center;font-size:15px;line-height:1.35;z-index:12}
html body.ps-on #stage #psToast b{display:inline;margin:0 7px 0 0;font-size:11px}

/* ---- THE LINE over the folded satchel says nothing when nothing is in hand or aimed at (Eivind, 2026-10-07: the bag's badge already shows
   the count). It keeps its room (invisible, not clickable), so the bag never moves when a sentence appears. */
html body.ps-on .ps-sat:not(.open) .ps-sat-line.empty{visibility:hidden}

/* ---- ITEM CLOSE-UPS (js/closeups.js .co-item; Eivind, 2026-10-07: "where's the close-up of our objects? Knife and coins and so on. We want
   to see them in their full pixel glory"). A carried thing with no authored close-up opens its own 576 px art: at least native size on a
   desktop (bigger, pixel-sharp, when the screen has the room), the full width on a phone; centred, its words along the bottom. The name and
   Close stand in the top corners so the picture gets the height. No details, so no chips, no count, no reveal slot. */
.ps-sat-all .ps-bigimg{cursor:zoom-in}
html body.ps-on .co.co-item .co-card{max-width:none}
html body.ps-on .co.co-item :is(.co-cap,.co-slot,.co-chips,.co-count){display:none}
html body.ps-on .co.co-item .co-fig{flex:none;padding:6px 0 2px}
html body.ps-on .co.co-item .co-img{width:min(calc(100vw - 28px),calc(100dvh - var(--ps-head,44px) - env(safe-area-inset-top) - 150px));height:auto;
  max-width:none;max-height:none;aspect-ratio:1;image-rendering:pixelated}
html body.ps-on .co.co-item .co-see{margin:4px 0 0;max-width:min(100%,640px)}
@media (min-width:700px) and (min-height:640px){
  html body.ps-on .co.co-item .co-img{width:max(576px,min(calc(100dvh - var(--ps-head,44px) - env(safe-area-inset-top) - 150px),calc(100vw - 40px),1152px))}
  html body.ps-on .co.co-item .co-head{position:absolute;z-index:1;top:calc(var(--ps-head,44px) + env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));
    right:max(14px,env(safe-area-inset-right));width:auto}
}
/* a phone: the picture fills the width (downscaled smoothly) */
@media (max-width:699px){
  html body.ps-on .co.co-item .co-img{width:calc(100vw - 28px);image-rendering:auto}
  html body.ps-on .co.co-item .co-fig{flex:1 1 auto}
}