/* Eight-head character atlases are displayed without stretching or altering the PNGs. */
.scene-heading{z-index:5;pointer-events:none}
.dialogue{z-index:10}
.phone{z-index:8}
.ending{z-index:20}
.art-view .dialogue,.art-view .phone{visibility:hidden;pointer-events:none}
.game-foot #view-scene{border-bottom:1px solid #777;padding:3px 0}
.cast-layer{position:absolute;inset:125px 0 0;z-index:2;pointer-events:none;overflow:hidden}
.actor{position:absolute;top:12px;height:calc(100% - 12px);max-height:700px;width:auto;margin:0;transform:translateX(-50%);transition:opacity .16s ease;opacity:1}
.actor-sprite{width:100%;height:100%;background-size:300% 200%;background-repeat:no-repeat;transform:translateX(-8%)}
.actor figcaption{position:absolute;top:8px;left:50%;transform:translate(-50%,-100%);font-size:10px;line-height:1.2;letter-spacing:.08em;background:#f8f7f3e6;color:#292929;padding:3px 8px;border:1px solid #4c4c4c;white-space:nowrap;opacity:.65}
.actor.speaking{z-index:3}
.actor.speaking figcaption{background:#191919;color:#fff;opacity:1;border-color:#fff}
.cast-layer.frame-medium .actor{height:145%;max-height:none;top:12px}
.cast-layer.frame-close .actor{height:190%;max-height:none;top:12px}
.cast-layer.frame-seated .actor{height:108%;top:0;max-height:none}
.cast-layer.group .actor{top:7%;height:93%}
.cast-layer.group .actor.guest{top:2%;height:89%;z-index:1}
.cast-layer.remote{inset:135px 3% 0}
.cast-layer.remote:before,.cast-layer.remote:after{content:"";position:absolute;top:0;bottom:65px;width:42%;border:1px solid #777;background:linear-gradient(#f8f7f3bb,#f8f7f333);box-shadow:3px 3px 0 #1114;z-index:-1}
.cast-layer.remote:before{left:8%}.cast-layer.remote:after{right:8%}
.cast-layer.remote:before,.cast-layer.remote:after{content:none}
.remote-pane{position:absolute;top:0;bottom:65px;transform:translateX(-50%);border:1px solid #777;background:linear-gradient(#f8f7f3bb,#f8f7f333);box-shadow:3px 3px 0 #1114;z-index:-1}
.interaction-cg{position:absolute;left:50%;top:0;transform:translateX(-50%);width:100%;height:135%;max-width:none;object-fit:contain;object-position:center top}
.art-view .interaction-cg{height:100%}
.remote-note{position:absolute;top:0;left:50%;transform:translate(-50%,-115%);font-size:9px;letter-spacing:.03em;color:#fff;background:#111a;padding:4px 9px;white-space:nowrap}
.cast-layer.remote .actor{height:calc(100% - 10px);top:8px}
.cast-layer.remote .actor figcaption{top:8px}
.cast-layer.remote.frame-close .actor[data-wardrobe="video"]{height:100%;top:10px;max-height:none}
.cast-layer.remote.frame-close .actor{height:185%;top:10px}
.cast-layer.group.frame-medium .actor{height:127%;max-height:none;top:12px}
.cast-layer.group.frame-medium .actor.guest{height:123%;top:4px}
.art-view .cast-layer .actor{height:calc(100% - 12px);max-height:none;top:12px}
.scene-shade{z-index:1;background:linear-gradient(#0009,transparent 30%,transparent 62%,#0004)}
.character-art-title{font-size:17px;font-weight:500;margin:35px 0 18px;border-top:1px solid #aaa;padding-top:25px}
.character-art-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.character-art-card{display:block;border:1px solid #aaa;background:#fff;color:inherit;text-decoration:none}
.character-art-card img{width:100%;height:auto;padding:10px;background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.character-art-card span{display:block;border-top:1px solid #ddd;padding:11px;font-size:12px}
@media(max-width:700px){
 .cast-layer{inset:130px -8% 0}
 .actor{top:0;height:100%}
 .actor figcaption{font-size:8px;top:6px;padding:3px 6px}
 .cast-layer.group{inset:145px -7% 0}
 .cast-layer.group .actor{top:8%;height:85%}
 .cast-layer.group .actor.guest{top:2%;height:78%}
 .cast-layer.remote{inset:151px -5% 0}
 .cast-layer.frame-medium .actor{height:108%;top:8px}
 .cast-layer.frame-close .actor,.cast-layer.remote.frame-close .actor{height:125%;top:10px}
 .cast-layer.remote.frame-close .actor[data-wardrobe="video"]{height:78%;top:10px}
 .cast-layer.group.frame-medium .actor{height:89%;top:8px}
 .cast-layer.group.frame-medium .actor.guest{height:83%;top:0}
 .art-view .cast-layer .actor{height:90%;top:10px}
 .cast-layer.remote:before,.cast-layer.remote:after{bottom:70px;width:41%}
 .interaction-cg{width:135%;height:120%}
 .art-view .interaction-cg{width:100%;height:100%}
 .remote-note{font-size:8px;max-width:85%;white-space:normal;text-align:center}
 .character-art-grid{gap:10px}
 .character-art-card span{font-size:10px;padding:9px}
 .scene-heading{top:13px}
 .scene-heading h2{margin:5px 0}
 .scene-heading .relationship{margin-top:3px}
}
@media(max-height:550px) and (min-width:701px){.cast-layer{inset:100px 0 0}.cast-layer.remote{inset:115px 0 0}.scene-heading h2{font-size:22px;margin:4px 0}.dialogue{max-height:53%;overflow:auto}}
@media(prefers-reduced-motion:reduce){.actor{transition:none}}