/* THE LEATHER SATCHEL (the Professor, 2026-10-05: "I really liked your satchel in the images with the leather and so on ... can we wire it").
   Wires the v4 mock (CRAYZGAMES/prototypes/stage-layout/v4-satchel.html) over the play screen's satchel (js/play-stage.js, css/play-stage.css):
   folded = the leather bag in the corner with the last three things peeking out and a count; open = the inside of the satchel, brown leather
   with a stitched edge, the chosen thing big at the top with its words, HOLD IT and the magnifier, and under it the shelves by kind.
   THE LINE (the SCUMM sentence) stays on top of everything. Loaded after play-stage.css; it only overrides. */

/* flush with the screen's bottom: fixed to the viewport (the cast strip's own bottom offset varies by layout) */
html body.ps-on .ps-sat,html body.ps-on .ps-sat-hints{position:fixed;bottom:env(safe-area-inset-bottom,0px)}
html body.ps-on #psCast{z-index:11}   /* over #card (10), so the bag in the corner stays tappable under a wide subtitle on a landscape phone */
/* a phone: the subtitles take the whole bottom, so the bag sits just above them */
@media (max-width:699px){ html body.ps-on .ps-sat,html body.ps-on .ps-sat-hints{bottom:calc(var(--ps-bar) + 6px)} }
/* ---- folded: the bag ---- */
/* the bag never grows past the room beside the subtitles (the Professor, 2026-10-05: "so it doesn't become bigger than it can fit beside the
   subs on the side"): below 1100px the text column leaves it 150px a side; the bag is the smaller of 112px and that room */
@media (min-width:700px) and (max-width:1099px){ :root{ --ps-col:min(900px,calc(100vw - 2 * 150px)) } }
.ps-bag{width:min(112px,max(72px,calc((100vw - var(--ps-col)) / 2 - 24px)));height:auto;aspect-ratio:112/92}
@media (max-width:699px){ .ps-bag{width:96px} }
html body.ps-on .ps-sat:not(.open){width:auto;align-items:flex-end}
/* Jim's side on the left: the bag and the line hug the LEFT edge (else the wide line pushes the bag out under the subtitles) */
html body.ps-on.ps-jim-left .ps-sat:not(.open){align-items:flex-start}
html body.ps-on.ps-jim-left .ps-bag{margin:0 0 6px 10px}
html body.ps-on.ps-jim-left .ps-sat:not(.open) .ps-sat-line{align-self:flex-start;margin:0 0 0 10px}
@media (max-width:1099px){ html body.ps-on .ps-sat-hints{display:none} }   /* no room beside the bag for the useful-here box */
html body.ps-on .ps-sat:not(.open) .ps-sat-pane{display:none}
.ps-bag{position:relative;display:block;margin:0 10px 6px 0;border:0;background:none;padding:0;cursor:pointer;pointer-events:auto}
.ps-bag svg{width:100%;height:100%;display:block;overflow:visible}
.ps-bag .peek{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.ps-bag:hover .peek{transform:translateY(-6px)}
.ps-bag .n{position:absolute;top:0;right:4px;min-width:24px;height:24px;border-radius:12px;background:#e0b873;color:#241808;font:800 12px/24px var(--ps-sans);text-align:center;box-shadow:0 2px 6px #000a}
.ps-bag.gulp{animation:psGulp .5s ease-out}
@keyframes psGulp{30%{transform:scale(1.14) rotate(-4deg)}60%{transform:scale(.96) rotate(2deg)}}
.ps-sat.open .ps-bag{display:none}
.ps-bag:focus-visible{outline:3px solid var(--ps-gold);outline-offset:2px;border-radius:12px}
/* the line over the bag: wide enough for the sentence, hugging the right edge */
html body.ps-on .ps-sat:not(.open) .ps-sat-line{width:max-content;max-width:min(60vw,420px);align-self:flex-end;margin-right:10px;border-radius:10px}
html body.ps-on .ps-sat:not(.open) .ps-sat-gap{width:1px}
/* useful here sits left of the bag */
html body.ps-on .ps-sat-hints{right:132px}
html body.ps-on.ps-jim-left .ps-sat-hints{right:auto;left:132px}
/* the toast (the world's answer) stands above the bag and the useful-here box, never on them */
@media (min-width:700px){ html body.ps-on #psToast{bottom:106px} }

/* ---- the line, in leather ---- */
.ps-sat-line{background:linear-gradient(#6b3f1e,#3c2310);box-shadow:inset 0 0 0 2px #2a170a,inset 0 0 0 4px #8a5a2c55,0 6px 16px #000a;color:#d6a76a}
.ps-sat-line b{color:#f3d48c}
.ps-sat-line.dim{color:#d6a76a} .ps-sat-line.dim b{color:#e8d4b0;opacity:.75}
.ps-sat-line.aimed{box-shadow:inset 0 0 0 2px #f3d48c,inset 0 0 0 4px #8a5a2c55,0 6px 16px #000a}

/* ---- open: the inside of the satchel ---- */
html body.ps-on .ps-sat.open{width:min(430px,calc(100vw - 12px));right:10px}
html body.ps-on.ps-jim-left .ps-sat.open{right:auto;left:10px}
html body.ps-on .ps-sat.open .ps-sat-line{border-radius:14px 14px 0 0}
html body.ps-on .ps-sat.open .ps-sat-pane{height:calc(var(--sat-room) - 34px);max-height:none;min-height:0;border-radius:0 0 14px 14px;overflow:hidden;
  background:linear-gradient(#6b3f1e,#3c2310);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 0 0 3px #2a170a,inset 0 0 0 7px #8a5a2c55,0 18px 40px #000c;
  transform-origin:100% 100%;animation:psOpenUp .28s cubic-bezier(.2,.9,.3,1.1)}
@keyframes psOpenUp{from{transform:scale(.22);opacity:0}to{transform:none;opacity:1}}
html body.ps-on .ps-sat.open .ps-sat-pane::before{content:"";position:absolute;inset:10px;border:2px dashed #d6a76a66;border-radius:12px;pointer-events:none;z-index:1}
/* the look: the chosen thing big, its name, words, HOLD IT and the magnifier */
html body.ps-on .ps-sat.open .ps-sat-all{flex:none;padding:22px 24px 14px;min-height:150px;max-height:46%;border-bottom:2px solid #2a170a;margin:10px 10px 0;border-radius:10px 10px 0 0;
  background:radial-gradient(ellipse at 30% 40%,#8a5a2c,#5a3417);color:#f2e8d2;animation:none}
.ps-sat-all .ps-big{gap:14px;align-items:flex-start}
.ps-sat-all .ps-bigimg{width:112px;filter:drop-shadow(0 8px 10px #000b)}
.ps-sat-all .ps-iname{color:#f3d48c;letter-spacing:.2em;margin:6px 0 4px}
.ps-sat-all .ps-idesc{font:italic 17px/1.35 var(--ps-serif);color:#f2e8d2}
.ps-sat-all .ps-acts{display:flex;gap:8px;margin-top:10px;align-items:center}
.ps-sat-all .ps-use{border:1.5px solid #e0b873;background:#e0b87322;color:#f2e8d2;border-radius:9px;padding:5px 12px;min-height:0;font:700 11px var(--ps-sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.ps-sat-all .ps-use:hover{background:#e0b87344}
.ps-sat-all .ps-use.ps-look{position:static;width:34px;height:30px;padding:0;border-radius:9px;display:grid;place-items:center}
.ps-sat-all .ps-use[hidden]{display:none}
.ps-sat-all .ps-ans{border-top:1px solid #d6a76a55;color:#f2e8d2}
.ps-sat-all .ps-ans b{color:#f3d48c}
.ps-sat-all .ps-empty{margin:0;font:italic 16px/1.4 var(--ps-serif);color:#f2e8d2}
.ps-sat.open .ps-sat-more{top:14px;right:14px;background:#2a170a;color:#f3d48c;box-shadow:inset 0 0 0 1.5px #e0b873}
/* the shelves */
html body.ps-on .ps-sat.open .ps-sat-row{flex:1;min-height:0;height:auto;margin:0;padding:6px 18px 18px;border:0;display:block;overflow-y:auto;scroll-snap-type:y proximity;
  scrollbar-width:thin;scrollbar-color:#d6a76a #2a170a}
.ps-sat.open .ps-sat-arrow{display:none}
html body.ps-on .ps-sat.open .ps-sat-slots{display:block;width:auto;overflow:visible}
.ps-shelf{scroll-snap-align:start;margin-top:10px}
.ps-shelf h4{margin:0 0 2px 6px;font:700 10px var(--ps-sans);letter-spacing:.24em;text-transform:uppercase;color:#d6a76acc}
.ps-plank{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px 8px 14px;position:relative}
.ps-plank::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;border-radius:3px;background:linear-gradient(#a0703d,#5a3a1c);box-shadow:0 4px 6px #0008}
.ps-plank .ps-slot{position:relative;z-index:1;width:auto;aspect-ratio:1;border:0;background:radial-gradient(circle at 50% 70%,#0003,#0000 70%);padding:4px;border-radius:10px;transition:transform .15s;box-shadow:none}
.ps-plank .ps-slot:hover:not(.ghost){transform:translateY(-4px);box-shadow:none}
.ps-plank .ps-slot[aria-pressed=true]{outline:3px solid #f3d48c;outline-offset:-3px;box-shadow:none}
.ps-plank .ps-slot.ghost{border:1.5px dashed #d6a76a33;background:none}
.ps-plank .ps-slot img{filter:drop-shadow(0 5px 5px #000c)}
/* short landscape phones: no room for the big picture, the shelves take the rest */
@media (orientation:landscape) and (max-height:520px){ html body.ps-on .ps-sat.open .ps-sat-all{min-height:0;padding:12px 16px 8px} .ps-bag{width:84px;height:69px} html body.ps-on .ps-sat-hints{right:104px} }
@media (prefers-reduced-motion:reduce){ .ps-bag .peek,.ps-bag.gulp,.ps-sat.open .ps-sat-pane{transition:none;animation:none} }
/* twin: in-game motion switch */
html body.ps-still .ps-bag .peek,html body.ps-still .ps-bag.gulp,html body.ps-still .ps-sat.open .ps-sat-pane{transition:none;animation:none}

/* INSIDE THE BAG (Eivind, 2026-10-08: "items should not be outside of the satchel graphic, like overlaid. let it feel like they are inside").
   The shelves scroll INSIDE the stitched (dashed) seam, never over it or past the leather's edge; each thing sits in a sewn pocket,
   drawn a little smaller with a shadow into the pocket rather than hovering over the bag. */
html body.ps-on .ps-sat.open .ps-sat-row{margin:0 12px 12px;padding:6px 10px 10px;border-radius:0 0 10px 10px;overflow-x:hidden;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 14px),transparent);mask-image:linear-gradient(#000 calc(100% - 14px),transparent)}
.ps-plank{gap:8px;padding:6px 6px 14px}
.ps-plank .ps-slot{padding:9%;border-radius:12px;background:radial-gradient(ellipse at 50% 35%,#4a2b14,#2e1a0b 75%);
  box-shadow:inset 0 3px 8px #000a,inset 0 -1px 0 #8a5a2c55,0 1px 0 #8a5a2c33}
.ps-plank .ps-slot:hover:not(.ghost){transform:none;box-shadow:inset 0 3px 8px #000a,inset 0 0 0 2px #d6a76a66}
.ps-plank .ps-slot img{filter:drop-shadow(0 2px 3px #000c)}
.ps-plank .ps-slot.ghost{background:none;box-shadow:inset 0 2px 6px #0006}
.ps-plank::after{height:8px}