/* V12: reserve actual space for captions, artwork, clues and scene controls. */
@import url('../planetme-302-v4/episode.css');
.game-shell{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.scene{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.scene-caption{position:static;max-width:none;flex:none;padding:22px 24px 16px}
.scene-caption p{display:block;margin:12px 0 0;line-height:1.8;overflow-wrap:anywhere}
.scene-art{position:relative;isolation:isolate;flex:1 0 420px;min-height:420px;margin:0 18px}
.scene-art>#scene-image{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;object-fit:contain;object-position:center;z-index:0;animation:scene-in .4s ease-out}
.scene-art>.scene-shade{display:none}
.scene-art>.paper{z-index:1;top:50%;max-width:calc(100% - 40px);margin:0;overflow-wrap:anywhere}
.scene[data-node=note] #scene-image{opacity:.85}
#props{position:static;flex:none;display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:8px;margin:16px 18px 0}
#props:empty{display:none}
.prop{min-width:0;max-width:100%;flex:0 1 190px;overflow-wrap:anywhere}
.prop b{flex-shrink:0}
.prop span{min-width:0}
.scene-bottom{position:static;flex:none;flex-wrap:wrap;gap:12px;margin:0;padding:20px 24px;align-items:center}
.scene-bottom #hint{margin-left:auto;flex-shrink:0}
.scene-seal{min-width:0}
.choice{min-width:0}
.choice>span:not(.choice-number):not(.arrow){min-width:0;overflow-wrap:anywhere}
.choice .arrow{flex-shrink:0}
.speech,.postcard-mini,.notebook h2{overflow-wrap:anywhere}
.notebook-head{gap:14px}
#clue-count{flex-shrink:0}
 dialog{max-height:calc(100svh - 32px);overflow:auto;overflow-wrap:anywhere}
#notice-actions{flex-wrap:wrap}
footer{flex-wrap:wrap;padding-inline:20px}
footer nav{flex-wrap:wrap}
@media(min-width:621px) and (max-width:850px){
 .game-shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .scene-caption{padding:20px 18px 16px}
 .scene-art{margin-inline:14px}
 .scene-bottom{padding:18px}
}
@media(max-width:620px){
 .scene{height:auto;min-height:0;max-height:none}
 .scene-caption{padding:18px 17px 14px}
 .scene-caption p{display:block;font-size:10px}
 .scene-art{flex:0 0 auto;height:clamp(280px,52svh,440px);min-height:0;margin:0 12px}
 #props{margin:14px 12px 0}
 .prop{flex:1 1 135px}
 .scene-bottom{padding:16px 17px}
 .top{flex-wrap:wrap}
 .brand,.tools{flex-shrink:0}
 .episode-heading>div:first-child{min-width:0;overflow-wrap:anywhere}
 .notebook-head{flex-wrap:wrap}
 footer{padding-inline:0}
}

/* Preserve complete Korean words in narrow headings. */
.episode-heading h1{word-break:keep-all;overflow-wrap:normal}