/* Table objects are the story's shared memory, with the same felt scene controls. */
.place-keepsake{position:absolute;left:26%;top:52%;width:26%;height:42%;padding:0;border:0;background:none;color:#51351e;cursor:pointer;animation:object-wait 1.8s ease-in-out infinite;z-index:8}
.place-keepsake .outcome-prop,.place-keepsake .outcome-photo{width:100%;height:76%;object-fit:contain}
.place-keepsake>span,.service-made{display:block;padding:8px 12px;border:1px dashed #c3a275;background:#fcebcbea;background-image:var(--felt-noise);color:#563b26;font-size:16px;line-height:1.5;border-radius:8px}
.service-made{position:absolute;left:10%;bottom:8%;max-width:38%}
.place-keepsake:focus-visible,.gather-object:focus-visible{outline:3px dashed #ffedcc;outline-offset:8px}
.takeaway-departure{flex:1;min-height:0;background-position:center;background-size:contain;background-repeat:no-repeat;background-color:#1c344e;animation:departure-frame .8s ease both}
.takeaway-exit{background:#1c344e}
.gathering-game{background:#173451;overflow:hidden}
.gather-room{position:relative;min-height:0;flex:1;overflow:hidden;display:grid;place-items:center;background:#1c344e;container-type:size}
.gather-art{position:relative;flex:none;width:min(100cqw,177.6833cqh);aspect-ratio:1672/941;isolation:isolate}
.gather-background{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.gather-phase{position:absolute;top:14px;left:18px;color:#fff0d4;background:#173451d9;padding:9px 14px;border:1px dashed #e2c69d;border-radius:10px}
.gather-phase>span{display:block;font-size:14px;line-height:1.4}
.gather-phase>strong{display:block;font-size:20px;line-height:1.5}
.gather-guest{position:absolute;width:14%;height:31%;left:calc(6% + var(--slot)*15%);top:29%;z-index:1;animation:guest-at-table .7s ease both}
.gather-name{position:absolute;top:-3%;left:50%;transform:translateX(-50%);font-size:14px;line-height:1.4;white-space:nowrap;color:#fff0d2;background:#183451d9;padding:2px 7px;border-radius:8px}
.gather-object{position:absolute;top:62%;width:17%;height:24%;border:0;background:none;padding:0;color:#55391f;z-index:3;text-align:center}
.gather-object.object-work{left:74%}.gather-object.object-read{left:28%}.gather-object.object-photo{left:51%}.gather-object.object-party{left:7%}
.gather-object>img,.gather-object>.outcome-prop,.gather-object>.outcome-photo{display:block;width:100%;height:73%;object-fit:contain;margin:0}
.gather-object>span{display:block;position:relative;width:max-content;max-width:145%;left:50%;transform:translateX(-50%);padding:4px 8px;color:#38281d;background:#ffedccd9;font-size:14px;line-height:1.4;border-radius:6px}
.gather-object.can-place{cursor:pointer;animation:object-wait 1.8s ease-in-out infinite}
.gather-object.can-place>img,.gather-object.can-place>.outcome-prop,.gather-object.can-place>.outcome-photo{opacity:.4;filter:drop-shadow(0 0 5px #fff1cd)}
.gather-object.placed{animation:keepsake-arrive .45s ease both}
.gather-art[data-quiet="coffee"] .object-party>img{transform:translateY(-24%);transition:transform .5s}
.gather-door-note,.photo-filed-mark{position:absolute;right:5%;top:16%;max-width:31%;background:#fceccfe6;color:#533821;border:1px dashed #b78c58;padding:8px 12px;border-radius:9px;font-size:14px;line-height:1.5;z-index:5}
.photo-filed-mark{top:86%;right:35%;max-width:36%}
.gather-hint{font-size:16px;line-height:1.5;color:#f4d9b5}
.gathering-dialogue{flex:none;max-height:43dvh;overflow-y:auto}
.gathering-dialogue .actions{flex-wrap:wrap;gap:8px}
.gathering-dialogue .btn{font-size:16px;white-space:normal;line-height:1.5}
.hub-table-note{position:absolute;left:10%;top:82%;z-index:5;border:1px dashed #bb8a54;background:#fff0d6;color:#5d3c23;border-radius:9px;padding:10px 18px;font-size:16px;box-shadow:0 4px 8px #1b202435;cursor:pointer}
.story-day-banner{font-size:16px;line-height:1.8;color:#efd6ae}
.incoming-keepsake{position:absolute;left:27%;bottom:6%;width:18%;height:24%;z-index:3;pointer-events:none}
.incoming-keepsake>.outcome-prop,.incoming-keepsake>.outcome-photo{width:100%;height:100%;object-fit:contain;opacity:.95}
.board-objects{position:absolute;left:9%;right:9%;top:57%;height:29%;display:flex;gap:7%;align-items:center;justify-content:center}
.board-item{display:flex;flex-direction:column;align-items:center;width:23%;height:100%;padding:0;border:0;background:none;color:#50351d;font-size:14px;cursor:pointer}
.board-item>.outcome-prop,.board-item>.outcome-photo{height:78%;width:100%;object-fit:contain}
.board-item>span{background:#ffefd6e3;border-radius:6px;padding:4px 8px;font-size:14px}
@keyframes object-wait{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes guest-at-table{from{opacity:0;transform:translate(22px,7px)}to{opacity:1;transform:translate(0,0)}}
@keyframes departure-frame{from{opacity:.3;scale:1.025}to{opacity:1;scale:1}}
#app[data-paused="true"] .can-place,#app[data-paused="true"] .place-keepsake{animation-play-state:paused}
@media(max-width:700px){
 .gather-phase{top:8px;left:8px;padding:5px 9px}.gather-phase>strong{font-size:16px}
 .gathering-dialogue{max-height:51dvh}.gathering-dialogue .actions{justify-content:flex-start}
 .gather-object>span{font-size:14px;max-width:180%;padding:2px 4px}
 .gather-name{font-size:14px;padding:1px 3px}
 .gather-guest .gather-name{display:none}
 .gather-object.placed:not([data-action])>span{position:absolute;left:0;width:1px;height:1px;max-width:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .gather-door-note{top:15%;font-size:14px;right:3%;max-width:42%;padding:5px 8px}
 .photo-filed-mark{top:89%;right:18%;max-width:65%;padding:4px 8px}
 .gather-room{min-height:33dvh}
 .place-keepsake{width:30%;left:24%;top:50%;height:43%}.place-keepsake>span{font-size:14px}
 .service-made{font-size:14px;max-width:42%;left:4%}
}
@media(prefers-reduced-motion:reduce){.place-keepsake,.gather-guest,.can-place,.takeaway-departure,.gather-object.placed{animation:none}}

/* The last scene turns the same placed objects over, revealing the reply. */
.gather-object[data-action="gatherFind"]{cursor:pointer}
.gather-object.keepsake-open{animation:keepsake-turn .6s ease both}
.gather-object .keepsake-reply{position:absolute;left:15%;right:15%;top:21%;color:#fff3d9;font-style:normal;font-size:clamp(12px,1.3cqw,20px);line-height:1.4;pointer-events:none;text-align:center}
.object-read .keepsake-reply{left:7%;right:7%;top:17%;padding:4px;background:#fff0d7;color:#513c29;border-radius:3px;font-size:14px}
.gather-departing{animation:guest-leave-table 1.1s ease-in forwards;pointer-events:none}
@keyframes keepsake-turn{0%{transform:rotateY(0)}45%{transform:rotateY(90deg)}46%{transform:rotateY(-90deg)}100%{transform:rotateY(0)}}
@keyframes guest-leave-table{from{opacity:1;translate:0 0}to{opacity:0;translate:100% -20%}}
#app[data-paused="true"] .gather-guest,#app[data-paused="true"] .gather-object{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.gather-departing{animation:none;opacity:0}.gather-object.keepsake-open{animation:none}}

.gather-program{position:absolute;left:18%;top:55%;width:11%;height:15%;z-index:2;pointer-events:none}.gather-program .outcome-prop{width:100%;height:100%}

/* Dialogue keeps natural pauses without shrinking the type on a small screen. */
.spoken-turn{display:block;margin-block:.18em;line-height:1.65}
.spoken-turn.stage-direction{color:#ead7bb;font-size:1em}
.detail-section .spoken-turn.stage-direction{color:inherit;opacity:.82}
.service-layout>.dialogue:has(.spoken-turn){overflow-y:auto;max-height:46dvh}
.service-layout>.dialogue .line:has(.spoken-turn){font-size:1rem;min-width:0}
.service-layout>.gathering-dialogue:has(.spoken-turn){max-height:48dvh}
@media(max-width:650px){.service-layout>.dialogue:has(.spoken-turn){max-height:52dvh}.spoken-turn{line-height:1.6}.service-layout>.dialogue:has(.spoken-turn)>.actions{justify-content:flex-start}}