/* OBJECT CLOSE-UPS (js/closeups.js). An object on a transparent background, centred over the dimmed play screen. */
.co{position:absolute;inset:0;z-index:40;font-family:var(--ps-sans,system-ui,sans-serif);color:#f6efe0}
.co[hidden]{display:none}
.co-scrim{position:absolute;inset:0;background:rgba(6,5,10,.84);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.co.in .co-scrim{animation:coFade .22s ease-out}
.co-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:820px;margin:0 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(var(--ps-head,44px) + env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));pointer-events:none}
.co-card > *{pointer-events:none}
.co-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;flex:none}
.co-head .co-name{font:700 13px var(--ps-sans,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:var(--ps-gold,#e0b873);text-shadow:0 1px 4px #000}
.co-x{pointer-events:auto;min-height:44px;min-width:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(216,176,106,.6);background:rgba(16,12,22,.86);color:#f6efe0;cursor:pointer;
  font:700 12px var(--ps-sans,sans-serif);letter-spacing:.14em;text-transform:uppercase;touch-action:manipulation}
.co-x:hover{border-color:var(--ps-gold,#e0b873)}
.co-x:focus-visible,.co-chip:focus-visible,.co-det:focus-visible{outline:3px solid var(--ps-gold,#e0b873);outline-offset:2px}
/* the picture takes the space above the words and sits a little low; the words (what you see, the revealed line, the checklist chips) live
   along the bottom, with room kept for the revealed line so nothing jumps when a detail is tapped */
.co-fig{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;width:100%;padding:18px 0 10px}
.co-obj{position:relative;display:inline-block;line-height:0;pointer-events:auto;animation:coPop .28s ease-out both;
  translate:var(--sea-x,0px) var(--sea-y,0px);rotate:var(--sea-r,0deg)}
.co-img{display:block;width:auto;height:auto;max-width:min(88vw,640px);max-height:min(38dvh,420px);filter:drop-shadow(0 16px 24px rgba(0,0,0,.75));-webkit-user-drag:none;user-select:none}
@media (min-height:700px){ .co-img{max-height:min(44dvh,520px)} }
.co-dets{position:absolute;inset:0}
.co-det{position:absolute;padding:0;margin:0;cursor:pointer;background:transparent;border:2px dashed rgba(224,184,115,.7);border-radius:10px;touch-action:manipulation;
  animation:coPulse 2.2s ease-in-out infinite}
.co-det.ring{aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border-style:solid}
.co-det:hover,.co-det.on{background:rgba(224,184,115,.2);border-color:#f3d79c;animation:none}
.co-det.done{border-style:solid;border-color:rgba(224,184,115,.45);animation:none}
.co-det.on{box-shadow:0 0 0 3px rgba(224,184,115,.35)}
.co-text{display:contents}
.co-text > *{pointer-events:auto;width:min(100%,560px);box-sizing:border-box;text-align:center}
/* THUMB PLACEMENT (Eivind, 2026-10-05): the picture takes the middle; under it the caption and what you see, then the revealed line, and the
   checklist chips last, at the very bottom where a thumb rests */
.co-fig{order:1}.co-cap{order:2}.co-see{order:3}.co-slot{order:4}.co-chips{order:5}.co-count{order:6}
/* THE CHIPS STAY PUT (the Professor, 2026-10-05: "the buttons should be on the bottom, they shouldn't be jumping around"): the checklist and the
   count are pushed to the screen's bottom edge whatever the picture's height or the text's length; the picture takes the middle of what is left */
.co-chips{margin:10px 0 0;margin-top:auto;padding-top:14px}
.co-count{margin:6px 0 max(14px,env(safe-area-inset-bottom))}
@media (min-height:900px){ .co-img{max-height:min(52dvh,680px)} }
.co-chip{min-height:48px;padding:0 18px}
.co-cap{margin:2px 0 0;font:italic 400 16px/1.35 var(--ps-serif,Georgia,serif);color:var(--ps-gold,#e0b873)}
.co-see{margin:6px 0 0;font:400 17px/1.45 var(--ps-serif,Georgia,serif);color:#f6efe0}
/* the description box has a fixed place (the slot): the box is centred on it and grows up AND down from there when the line is longer,
   so it never moves and nothing around it jumps */
.co-slot{position:relative;height:104px;margin-top:10px}
.co-reveal{position:absolute;left:0;right:0;top:50%;translate:0 -50%;display:block;visibility:hidden;min-height:60px;box-sizing:border-box;margin:0;padding:10px 14px;border-radius:12px;background:rgba(34,28,46,.94);border:1.5px solid rgba(216,176,106,.55);text-align:left;
  font:400 17px/1.45 var(--ps-serif,Georgia,serif)}
.co-reveal.on{visibility:visible;animation:coPop .2s ease-out both}
.co-reveal b{display:block;margin-bottom:3px;font:700 11px var(--ps-sans,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:var(--ps-gold,#e0b873)}
.co-reveal em{color:#f3d79c}
.co-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px 0 0;margin-top:auto}
.co-chip{min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid rgba(216,176,106,.4);background:rgba(255,255,255,.05);color:#f6efe0;cursor:pointer;
  font:600 13px var(--ps-sans,sans-serif);touch-action:manipulation}
.co-chip:hover,.co-chip.on{border-color:var(--ps-gold,#e0b873);background:rgba(224,184,115,.22)}
.co-chip.done::before{content:'✓ ';color:var(--ps-gold,#e0b873)}
.co-count{margin:8px 0 0;font:600 11px var(--ps-sans,sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#a99f8c}
/* a short landscape phone: the object left, the words right */
@media (orientation:landscape) and (max-height:520px){
  .co-card{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;align-content:start;max-width:none}
  .co-head{grid-column:1 / -1;min-height:44px}
  .co-fig{grid-column:1;grid-row:2;align-self:center}
  .co-text{display:block;grid-column:2;grid-row:2;align-self:center;text-align:left;width:auto}
  .co-text > *{width:auto;text-align:left}
  .co-img{max-width:min(46vw,520px);max-height:62dvh}
  .co-chips{justify-content:flex-start}
  .co-slot{height:auto;margin:0} .co-reveal{position:static;translate:none;min-height:0;display:none;margin-top:12px} .co-reveal.on{display:block}
  .co-see{font-size:15px}
}
body.co-open #psToast{opacity:0!important}
body.co-open #psSatchel,body.co-open #psTextBtn,body.co-open #psHintBtn{visibility:hidden}
@keyframes coFade{from{opacity:0}to{opacity:1}}
@keyframes coPop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes coPulse{50%{border-color:rgba(243,215,156,1);background:rgba(224,184,115,.12)}}
@media (prefers-reduced-motion:reduce){ .co-scrim,.co-obj,.co-reveal.on,.co-det{animation:none!important} }
/* twin: in-game motion switch */ html body.ps-still .co-scrim,html body.ps-still .co-obj,html body.ps-still .co-reveal.on,html body.ps-still .co-det{animation:none!important}