/* Logical 16:9 composition, bounded by the actual viewport rather than fixed pixels. */
body.frame-opening { padding:0; overflow:hidden; }
.frame-opening main { display:block; width:100%; max-width:1440px; height:100svh; box-sizing:border-box; padding:8px; margin:auto; }
.frame-opening #message:empty { display:none; }
.frame-opening #message:not(:empty) { position:fixed; z-index:20; top:0; left:0; right:0; margin:0; }
.frame-opening #ui-busy:not([hidden]) { position:fixed; top:0; right:12px; z-index:21; }
.scene-frame,.frame-opening #intro.scene-frame,.frame-opening #creation.scene-frame { position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:10px; width:100%; height:calc(100svh - 16px); min-height:0; margin:0; padding:16px; box-sizing:border-box; overflow:hidden; isolation:isolate; border:1px solid #c1b6a3; background:#d8d0c1; }
.frame-opening #intro.scene-frame,.frame-opening #creation.scene-frame { height:100%; }
.scene-background { position:absolute; inset:0; z-index:-1; background:linear-gradient(145deg,#ded6c6,#b4b0a2); }
.scene-background img { width:100%; height:100%; object-fit:cover; }
.scene-background-label { position:absolute; left:16px; bottom:14px; color:#5c584e; font-size:13px; }
[data-background-key='selection-transition'] .scene-background { background:linear-gradient(140deg,#55564f,#262d2a); }
[data-background-key='selection-transition'] { color:#fff9e9; }
.scene-heading { grid-column:1/-1; margin:0; font-size:22px; }
.scene-visual { display:flex; align-items:end; justify-content:center; gap:12px; min-height:0; min-width:0; padding-bottom:30px; }
.portrait-slot { min-width:0; max-width:32%; flex:1; height:75%; display:flex; flex-direction:column; justify-content:center; align-items:center; opacity:.5; transition:opacity .1s; }
.portrait-slot img { width:100%; height:100%; object-fit:contain; }
.portrait-placeholder { border:1px solid #8d8c7b; background:rgba(248,242,230,.35); border-radius:45% 45% 4px 4px; text-align:center; }
.portrait-placeholder small { font-size:12px; }
.portrait-focus { opacity:1; border-color:#676849; }
.scene-interaction { min-height:0; min-width:0; display:flex; flex-direction:column; justify-content:end; gap:12px; }
.scene-text { flex:0 1 auto; min-height:0; overflow:auto; padding:12px; background:rgba(255,252,243,.91); color:#363b30; border-radius:5px; }
.scene-text p { margin:6px 0; white-space:pre-line; }
.scene-actions { flex:0 1 auto; min-height:0; overflow:auto; display:grid; gap:8px; }
.scene-actions label { display:grid; gap:3px; min-width:0; }
.scene-actions input,.scene-actions select { width:100%; max-width:100%; min-width:0; box-sizing:border-box; font:inherit; padding:6px; }
.scene-actions p { margin:0; }
.scene-actions button,.frame-opening #intro button { white-space:normal; margin:0; min-height:36px; width:100%; padding:7px 10px; text-align:left; }
.scene-paths { grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px; padding-left:160px; }
.frame-opening #intro .scene-paths button { width:auto; }
.scene-actions details { margin:0; }
.scene-actions textarea { resize:none; box-sizing:border-box; }
.setup-frame .scene-interaction { justify-content:center; }
.setup-frame .scene-actions { grid-template-columns:1fr 1fr; }
.setup-frame .scene-actions label:first-child,.setup-frame .scene-actions p { grid-column:1/-1; }
@media (orientation:landscape) and (max-height:440px) {
 .frame-opening main { padding:4px; }
 .scene-frame,.frame-opening #intro.scene-frame,.frame-opening #creation.scene-frame { padding:10px; gap:6px; font-size:13px; line-height:1.5; }
 .scene-heading { font-size:17px; }
 .scene-interaction { gap:6px; }
 .scene-text { padding:8px; }
 .scene-actions { gap:5px; }
 .scene-actions button,.frame-opening #intro button { min-height:32px; padding:5px 8px; font-size:13px; }
 .portrait-slot { height:82%; }
 .scene-paths button { padding:5px 8px; font-size:13px; }
}
@media (orientation:portrait) and (max-width:700px) {
 .scene-frame,.frame-opening #intro.scene-frame,.frame-opening #creation.scene-frame { grid-template-columns:1fr; grid-template-rows:auto minmax(70px,.6fr) minmax(0,1fr) auto; }
 .scene-heading,.scene-paths { grid-column:1; }
 .scene-visual { padding-bottom:8px; }
 .scene-paths { padding-left:0; }
 .scene-interaction { justify-content:end; }
}