/* Relationship scenes use the existing two-frame pixel actors. The scene
   reflects a recorded response; motion never drives game simulation. */
.everyday-scene[class*="interaction-"] .scene-person{--actor-size:140px;--actor-width:116px;animation:none}
.everyday-scene[class*="interaction-"] .relative-baby{--actor-size:88px;--actor-width:76px}
.everyday-scene[class*="interaction-"] .relative-child{--actor-size:112px;--actor-width:98px}
.everyday-scene[class*="interaction-"] .relative-teen{--actor-size:126px;--actor-width:108px}
.everyday-scene[class*="interaction-"] .crowded .scene-person{--actor-size:106px;--actor-width:74px}
.everyday-scene[class*="interaction-"] .crowded .relative-child{--actor-size:86px;--actor-width:66px}
.everyday-scene[class*="interaction-"] .crowded .relative-baby{--actor-size:68px;--actor-width:54px}
.play-stage .everyday-scene[class*="interaction-"] .scene-person:not(.pet-person){width:var(--actor-width);min-width:0;max-width:var(--actor-width)!important;height:calc(var(--actor-size) + 24px);flex-shrink:0}
.play-stage .everyday-scene[class*="interaction-"] .scene-person:not(.pet-person)>.life-sprite{width:var(--actor-size);height:var(--actor-size);left:50%;bottom:18px;transform-origin:50% 90%;background-position-y:0;z-index:2}
.everyday-scene[class*="interaction-"] .scene-person>.life-sprite{transform:translateX(-50%);animation:none}
.play-stage .everyday-scene[class*="interaction-"] .companion>.life-sprite,.play-stage .everyday-scene[class*="interaction-"] .child-person>.life-sprite{transform:translateX(-50%) scaleX(-1)}
.everyday-scene[class*="interaction-"] .scene-cast{align-items:flex-end;gap:26px}
.everyday-scene[class*="interaction-"] .scene-cast.crowded{gap:10px}
.play-stage .everyday-scene[class*="interaction-"] .pixel-bubble{bottom:calc(var(--actor-size) + 26px)}
.everyday-scene:is(.interaction-talk,.interaction-hesitant,.interaction-reconnect,.interaction-close,.interaction-walk) .routine-prop{display:none}

/* Speaking and listening alternate, instead of everyone walking in place. */
.play-stage .everyday-scene.interaction-talk .protagonist>.life-sprite{animation:actorTalk 6s steps(1,end) infinite}
.play-stage .everyday-scene.interaction-talk :is(.companion,.child-person)>.life-sprite{animation:actorTalk 6s steps(1,end) -3s infinite}
.play-stage .everyday-scene.interaction-hesitant .protagonist>.life-sprite{rotate:-4deg;animation:actorHesitate 7s ease-in-out infinite}
.play-stage .everyday-scene.interaction-hesitant :is(.companion,.child-person)>.life-sprite{rotate:4deg}
.everyday-scene.interaction-hesitant .scene-cast{gap:46px}
.everyday-scene.interaction-reconnect .scene-cast{gap:34px}
.play-stage .everyday-scene.interaction-reconnect .protagonist>.life-sprite{animation:actorReach 6s ease-in-out infinite}
.play-stage .everyday-scene.interaction-reconnect :is(.companion,.child-person)>.life-sprite{animation:actorReply 6s ease-in-out infinite}
.everyday-scene.interaction-close .scene-cast{gap:8px}
.play-stage .everyday-scene.interaction-close .scene-person>.life-sprite{animation:actorGlad 4.8s ease-in-out infinite}
.play-stage .everyday-scene.interaction-close :is(.companion,.child-person)>.life-sprite{animation-delay:-.35s}
.play-stage .everyday-scene.interaction-apart .protagonist>.life-sprite{transform:translateX(-50%) scaleX(-1);rotate:-7deg;filter:saturate(.7);animation:actorSigh 7s ease-in-out infinite}
.play-stage .everyday-scene.interaction-apart .routine-prop{display:none}
.play-stage .everyday-scene.interaction-solo .routine-prop{z-index:0}
.play-stage .everyday-scene.interaction-walk .scene-person>.life-sprite{animation:actorWalk .9s steps(1,end) infinite;transform:translateX(-50%)}
.everyday-scene.interaction-walk .scene-cast{animation:walkingTogether 7s ease-in-out infinite}
.play-stage .everyday-scene.interaction-play .protagonist>.life-sprite{animation:actorTalk 4s steps(1,end) infinite}
.play-stage .everyday-scene.interaction-play :is(.companion,.child-person)>.life-sprite{animation:actorTalk 4s steps(1,end) -2s infinite}
.everyday-scene.interaction-play .routine-prop{animation:passBetweenFriends 4s ease-in-out infinite;width:56px;height:56px;left:95%;bottom:18px}

/* These are gesture marks, not invented dialogue or another status meter. */
.everyday-scene[class*="interaction-"] .scene-person>span.interaction-marks{display:flex;position:absolute;left:50%;bottom:calc(var(--actor-size,140px) + 12px);gap:4px;padding:5px 7px;min-height:0;max-width:none;border:0;border-radius:7px;background:#fffbed;box-shadow:0 2px 0 #a3b6a0;transform:translateX(-50%);pointer-events:none;z-index:4}
.interaction-marks{opacity:0}
.interaction-marks i{width:4px;height:4px;display:block;background:#5b7c68}
.interaction-talk .companion>.interaction-marks{animation:replyMarks 6s steps(1,end) infinite}
.interaction-hesitant .companion>.interaction-marks{opacity:1}
.interaction-reconnect .companion>.interaction-marks{animation:replyMarks 6s steps(1,end) infinite}
.interaction-close .companion>.interaction-marks{opacity:1;background:#fff0d1}
.interaction-close .interaction-marks i{background:#c59148}
.interaction-close .interaction-marks i:nth-child(2){height:10px;margin-top:-3px}
.everyday-scene.interaction-apart .interaction-marks{display:none}

/* A framed contact is not falsely placed in the protagonist's household. */
.everyday-scene.remote-contact .companion:before{content:'';position:absolute;inset:8px -6px 0;background:#eff7e8eb;border:2px solid #a3bc9a;border-radius:16px;box-shadow:0 4px 0 #799b8040}
.everyday-scene.remote-contact .companion>span:not(.life-sprite):not(.interaction-marks){bottom:3px}
.play-stage .everyday-scene.remote-contact .routine-prop{display:block;left:78%;bottom:46px;width:50px;height:50px;animation:phoneNod 3s steps(2,end) infinite}

/* Keep the full question once, in the decision card. Actual history/context
   and result feedback remain visible under the stage. */
.everyday-scene.shared-title [data-scene-title]{display:none}
.play-stage .everyday-scene.shared-title:not(:has(.scene-growth)){height:320px}
.play-stage .everyday-scene.shared-title:not(:has(.scene-growth)) .scene-caption{min-height:64px}
.play-stage .everyday-scene.shared-title:not(:has(.scene-growth)) .scene-cast{bottom:74px}

@keyframes actorTalk{0%,35%,100%{background-position-y:0;translate:0 0}10%,25%{background-position-y:100%;translate:0 -2px}}
@keyframes actorHesitate{0%,65%,100%{translate:0 0}35%{translate:-4px 2px}}
@keyframes actorReach{0%,100%{translate:0 0}35%,65%{translate:6px -1px}}
@keyframes actorReply{0%,45%,100%{translate:0 0}65%{translate:-3px -2px}}
@keyframes actorGlad{0%,45%,100%{translate:0 0}15%{translate:0 -4px}30%{translate:0 -1px}}
@keyframes actorSigh{0%,100%{translate:0 0}45%{translate:0 3px}}
@keyframes actorWalk{0%,100%{background-position-y:0;translate:0 0}50%{background-position-y:100%;translate:0 -2px}}
@keyframes walkingTogether{0%,100%{translate:-8px 0}50%{translate:8px 0}}
@keyframes passBetweenFriends{0%,100%{translate:0 0;rotate:0deg}50%{translate:55px 0;rotate:120deg}}
@keyframes replyMarks{0%,40%,90%,100%{opacity:0}45%,85%{opacity:1}}

@media(max-width:700px){
 .everyday-scene[class*="interaction-"] .scene-person{--actor-size:112px;--actor-width:90px}
 .everyday-scene[class*="interaction-"] .relative-baby{--actor-size:72px;--actor-width:60px}
 .everyday-scene[class*="interaction-"] .relative-child{--actor-size:96px;--actor-width:78px}
 .everyday-scene[class*="interaction-"] .relative-teen{--actor-size:104px;--actor-width:86px}
 .everyday-scene[class*="interaction-"] .scene-cast{gap:20px}
 .everyday-scene.interaction-hesitant .scene-cast{gap:34px}
 .everyday-scene.interaction-close .scene-cast{gap:6px}
 .everyday-scene[class*="interaction-"] .crowded .scene-person{--actor-size:76px;--actor-width:52px}
 .play-stage .everyday-scene[class*="interaction-"] .pixel-bubble{max-width:175px}
}
@media(max-width:480px){
 .play-stage:has(.decision-card) .everyday-scene.shared-title:not(:has(.scene-growth)){height:254px}
 .play-stage:has(.decision-card) .everyday-scene.shared-title:not(:has(.scene-growth)) .scene-cast{bottom:62px}
 .play-stage:has(.decision-card) .everyday-scene.shared-title:not(:has(.scene-growth)) .scene-caption{min-height:56px}
}
@media(prefers-reduced-motion:reduce){.everyday-scene[class*="interaction-"] *{animation:none!important;transition:none!important}}

/* Caption height follows its text instead of covering the actors' feet.
   Container queries also cover the narrow left column on a wide desktop. */
.play-stage .everyday-scene[class*="interaction-"]{height:auto!important;min-height:0}
.everyday-scene[class*="interaction-"] .scene-living-stage{position:relative;inset:auto;height:240px}
.everyday-scene[class*="interaction-"] .scene-weather{display:none}
.play-stage .everyday-scene[class*="interaction-"] .scene-living-stage>.pixel-bubble{position:absolute;top:16px;bottom:auto;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 28px);z-index:5}
.play-stage .everyday-scene[class*="interaction-"] .scene-cast{height:auto!important;bottom:12px!important}
.play-stage .everyday-scene[class*="interaction-"] .scene-caption{position:relative;bottom:auto;margin-bottom:5px;min-height:78px}
.play-stage .everyday-scene.shared-title[class*="interaction-"] .scene-caption{min-height:56px}
.everyday-scene.interaction-solo .interaction-marks{display:none}
@container(max-width:400px){
 .everyday-scene[class*="interaction-"] .scene-living-stage{height:220px}
 .everyday-scene[class*="interaction-"] .scene-person{--actor-size:112px;--actor-width:90px}
 .everyday-scene[class*="interaction-"] .relative-baby{--actor-size:72px;--actor-width:60px}
 .everyday-scene[class*="interaction-"] .relative-child{--actor-size:96px;--actor-width:78px}
 .everyday-scene[class*="interaction-"] .relative-teen{--actor-size:104px;--actor-width:86px}
 .everyday-scene[class*="interaction-"] .crowded .scene-person{--actor-size:76px;--actor-width:52px}
 .everyday-scene[class*="interaction-"] .crowded .relative-child{--actor-size:64px;--actor-width:46px}
 .everyday-scene[class*="interaction-"] .crowded .relative-baby{--actor-size:56px;--actor-width:42px}
 .everyday-scene[class*="interaction-"] .scene-cast.crowded{gap:6px}
 .everyday-scene[class*="interaction-"] .crowded .pet-person{width:40px;max-width:40px}
 .everyday-scene[class*="interaction-"] .crowded .pet-sprite{width:56px;height:56px}
 .everyday-scene[class*="interaction-"] .scene-cast{gap:20px}
 .everyday-scene.interaction-hesitant .scene-cast{gap:34px}
 .everyday-scene.interaction-close .scene-cast{gap:6px}
 .play-stage .everyday-scene[class*="interaction-"] .pixel-bubble{max-width:175px;font-size:14px}
 .everyday-scene[class*="interaction-"] .scene-weather{display:none}
 .play-stage .everyday-scene[class*="interaction-"] .scene-caption strong{font-size:17px}
}