/* A deliberate acting close-up, then a cut back to the established pixel world.
   Opaque cast backgrounds and Mameo's alpha both sit in a portrait frame. */
#app[data-campaign-stage=true] .campaign-scene-layout.has-expression-closeup{grid-template-columns:1fr}
#app[data-campaign-stage=true] .has-expression-closeup>.opening-art{display:none!important}
#app[data-campaign-stage=true] .has-expression .cutscene-portrait{display:block!important;flex:none}
#app[data-campaign-stage=true] .campaign-expression{width:170px;margin:0;border:1px solid #876f4b;background:#221e1a;box-shadow:3px 4px #26352e25;overflow:hidden}
.campaign-expression svg{display:block;width:100%;height:auto;aspect-ratio:512/500;overflow:hidden}
#app[data-campaign-stage=true] .campaign-expression figcaption{padding:5px 8px;text-align:center;font:600 12px/1.3 var(--body);letter-spacing:.04em;color:#e8ddbd;background:#243b30}
#app[data-campaign-stage=true] .has-expression .cutscene-stage{gap:20px;min-height:180px!important;align-items:flex-start}
/* Acting and consequence share the frame at physical conclusions. The smaller
   world view retains route geography, props and the real presence/loss state. */
#app[data-campaign-stage=true] .campaign-scene-layout.has-expression-context{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
#app[data-campaign-stage=true] .has-expression-context>.campaign-directed-art{display:flex!important;justify-content:flex-start}
#app[data-campaign-stage=true] .has-expression-context .campaign-directed-stage{aspect-ratio:1.8;min-height:180px;max-height:260px}
.has-expression-context .staging-acting-face{display:block;width:100%;height:100%;overflow:hidden}
.has-expression-context .staging-person img[hidden]{display:none!important}
.has-expression-context .staging-father.has-acting-face{background:#221e1a}
/* A face-only desktop shot has its own reading measure instead of stretching
   a phone-sized portrait and one line of dialogue across the whole stage. */
@media(min-width:1000px){
 #app[data-campaign-stage=true] .has-expression-closeup:not(.has-expression-context) .campaign-cutscene{align-items:center}
 #app[data-campaign-stage=true] .has-expression-closeup:not(.has-expression-context) .campaign-cutscene>.cutscene-head,
 #app[data-campaign-stage=true] .has-expression-closeup:not(.has-expression-context) .campaign-cutscene>.cutscene-stage,
 #app[data-campaign-stage=true] .has-expression-closeup:not(.has-expression-context) .campaign-cutscene>.cutscene-controls,
 #app[data-campaign-stage=true] .has-expression-closeup:not(.has-expression-context) .campaign-cutscene>.cutscene-transcript{width:100%;max-width:690px}
 #app[data-campaign-stage=true] .has-expression-closeup:not(.has-expression-context) .cutscene-stage{align-items:center;gap:24px}
 #app[data-campaign-stage=true] .has-expression-closeup:not(.has-expression-context) .campaign-expression{width:200px}
}
@media(max-width:999px){#app[data-campaign-stage=true] .campaign-scene-layout.has-expression-context{grid-template-columns:1fr}}
@media(max-width:650px){
 #app[data-campaign-stage=true] .has-expression .cutscene-stage{display:block;min-height:0!important}
 #app[data-campaign-stage=true] .has-expression .cutscene-portrait{float:left;margin:0 14px 8px 0}
 #app[data-campaign-stage=true] .campaign-expression{width:132px}
 #app[data-campaign-stage=true] .has-expression .cutscene-text{display:contents}
 #app[data-campaign-stage=true] .has-expression .cutscene-stage:after{content:'';display:block;clear:both}
 #app[data-campaign-stage=true] .has-expression-context .campaign-directed-stage{aspect-ratio:2.2;min-height:145px;max-height:165px}
}
@media(max-width:350px){#app[data-campaign-stage=true] .has-expression .cutscene-portrait{float:none;margin:0 auto 12px;width:max-content}}