/* Pixel scenes have their own unobstructed stage; story titles sit below it. */
.story-cinematic{position:relative;flex:none;margin:0 0 8px;border:1px solid #8f9f9280;border-radius:8px;overflow:hidden;background:#0d2130;contain:layout paint}
.motion-view{position:relative;height:clamp(168px,27dvh,260px);min-height:0;overflow:hidden;background:#17343d}
.story-cinematic canvas,.motion-expanded canvas{position:absolute;inset:0;display:block;width:100%;height:100%;image-rendering:pixelated}
.story-cinematic figcaption{position:relative;padding:7px 12px 8px;background:linear-gradient(110deg,#172e3b,#0f2330);border-top:1px solid #9eb69944}
.story-cinematic h2{font:500 20px/1.4 var(--serif);color:#f9dfa2;margin:1px 0 0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.story-cinematic .motion-place{display:block;color:#b7d1cf;font-size:9px;line-height:1.4}
.motion-subject{position:absolute;left:8px;top:8px;max-width:65%;padding:3px 7px;border:1px solid #98b0a866;border-radius:4px;color:#f8e4b7;background:#0a1c29d9;font-size:10px;line-height:1.5;pointer-events:none}
.motion-controls{position:absolute;right:7px;top:7px;display:flex;gap:6px;z-index:2}
.motion-controls button{background:#0a2130e8;border:1px solid #b6c6a7aa;border-radius:5px;padding:6px;min-height:32px;min-width:32px;color:#f3dfb4}
.motion-controls .icon{width:17px;height:17px}
.overlay>section.motion-dialog{width:min(1040px,100%);height:auto;max-height:94dvh;padding:14px;background:#102431;border:1px solid #bdac78;border-radius:8px;box-shadow:0 18px 80px #000b;display:flex;flex-direction:column;gap:10px}
.motion-dialog h2{font:500 20px var(--serif);color:#f0d6a4}.motion-dialog .overlay-heading{flex:none;margin:0}.motion-dialog .overlay-heading button{padding:6px 10px;font-size:12px}
.motion-expanded{position:relative;flex:none;width:100%;aspect-ratio:20/9;max-height:65dvh;background:#10242e;border:1px solid #657f77;overflow:hidden}
.motion-dialog p{font-size:11px;color:#bbd0cf;margin:0}.motion-expanded-controls{display:flex;justify-content:space-between;gap:10px}.motion-expanded-controls button{font-size:12px;padding:7px 12px}.motion-expanded-controls .icon{width:15px;height:15px}
.has-cinematic .life-flow-banner,.has-cinematic .scene-heading{display:none!important}
.has-cinematic .life-calendar{margin:0 0 6px;padding:3px 0}.has-cinematic .life-calendar:after{display:none}
.has-cinematic .reader{min-height:0}
.has-cinematic .result-strip .story-effects,.has-cinematic .result-text small,.has-cinematic .flow-decision-note{display:none}
.has-cinematic .result-strip{padding-top:2px;margin:3px 0}.has-cinematic .result-text strong{font-size:11px}
/* The painted portrait is already in the stage. Keep the real beast facts nearby. */
.has-cinematic .beast-scene{padding:4px 8px;gap:0;min-height:28px;margin-bottom:5px}
.has-cinematic .beast-scene img{display:none}.has-cinematic .beast-scene>div{display:flex;gap:10px;align-items:center;width:100%;min-width:0}
.has-cinematic .beast-scene strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.has-cinematic .beast-scene span{font-size:10px;white-space:nowrap}.has-cinematic .beast-scene small{display:none}
.has-cinematic .scene-relic{padding:3px 7px;margin-bottom:5px}.has-cinematic .scene-relic .relic-thumb{width:32px;height:32px}
.has-cinematic .duel-hud{padding:3px 9px;margin-bottom:5px;gap:2px 8px}.has-cinematic .duel-hud b{font-size:21px}.has-cinematic .duel-intent{padding-top:3px;margin-top:0}
.life-report-board .motion-view{height:clamp(140px,22dvh,200px)}
.has-cinematic.is-living .motion-view{height:clamp(138px,23dvh,200px)}
.has-cinematic.is-living .chronicle-heading{margin-top:0}
@media(max-width:1100px){
 .motion-view{height:180px}.story-cinematic h2{font-size:18px}.motion-subject{font-size:9px}
 .life-report-board .motion-view{height:140px}
}
@media(max-width:600px) and (min-height:521px){
 .story-cinematic{margin-bottom:5px}.motion-view{height:110px}
 .story-cinematic figcaption{padding:5px 8px}.story-cinematic h2{font-size:15px;line-height:1.35;margin:0}.story-cinematic .motion-place{display:none}
 .motion-controls{right:5px;top:5px;gap:5px}.motion-controls button{min-height:28px;min-width:28px;padding:5px}.motion-controls .icon{width:15px;height:15px}
 .motion-subject{font-size:8px;left:5px;top:5px;padding:2px 5px}
 .has-cinematic .life-date-line strong{font-size:10px}.has-cinematic .life-date-line>span{font-size:9px}.has-cinematic .life-calendar{margin-bottom:4px}
 .has-cinematic .answers .answer-wrap .answer,.has-cinematic .answers .answer-wrap .answer:has(.choice-odds){min-height:104px;height:104px!important;padding-block:6px}
 .has-cinematic .duel-hud{padding:2px 6px;gap:1px 4px}.has-cinematic .duel-hud b{font-size:18px}.has-cinematic .duel-hud strong{font-size:9px}.has-cinematic .duel-intent{font-size:8px;line-height:1.4;padding-top:2px;margin:0}.has-cinematic .duel-intent>strong{font-size:8px}
 .has-cinematic .beast-scene{padding:3px 6px;min-height:23px}.has-cinematic .beast-scene strong{font-size:10px;max-width:60%}.has-cinematic .beast-scene span{font-size:8px}
 .has-cinematic .result-strip{height:25px;min-height:25px;margin:2px 0;padding:0;overflow:hidden}.has-cinematic .result-text{min-width:0;height:25px;min-height:25px}.has-cinematic .result-text strong{font-size:10px;line-height:1.5}
 .game-screen>.character-panel{padding:5px 8px;gap:3px 6px}.character-panel .identity h1{font-size:14px;line-height:1.4}.character-panel .identity .realm-chip{font-size:8px!important;line-height:1.4}
 .character-panel .stat{padding:2px 3px}.character-panel .stat>.icon{width:18px;height:18px}.character-panel .stat b{font-size:14px;line-height:1.3}.character-panel .stat span{font-size:7px;line-height:1.2}
 .character-panel .standing>div,.character-panel .standing button{padding:0;min-height:17px;margin:0}.character-panel .standing .icon{height:11px;width:11px}
 .life-report-board .motion-view{height:96px}.has-cinematic.is-living .motion-view{height:100px}
 .overlay>section.motion-dialog{padding:9px}.motion-dialog h2{font-size:14px}.motion-dialog p{font-size:10px}.motion-dialog .overlay-heading button{font-size:10px;padding:5px}
 .motion-expanded{aspect-ratio:4/3;max-height:60dvh}
}
@media(max-height:520px){
 .story-cinematic{margin-bottom:4px}.motion-view{height:84px}.story-cinematic figcaption{padding:3px 8px}.story-cinematic h2{font-size:12px;line-height:1.3;margin:0}.story-cinematic .motion-place{display:none}
 .motion-subject{font-size:7px;left:4px;top:3px;padding:1px 4px}.motion-controls{right:4px;top:3px}.motion-controls button{min-height:24px;min-width:24px;padding:3px}.motion-controls .icon{width:13px;height:13px}
 .has-cinematic .life-calendar{padding:1px 0;margin-bottom:2px}.has-cinematic .duel-hud{padding:1px 7px;gap:1px 6px;margin-bottom:3px}.has-cinematic .duel-hud>div>strong{display:none}.has-cinematic .duel-hud b{font-size:16px}.has-cinematic .duel-intent{padding-top:1px;line-height:1.3;font-size:8px}.has-cinematic .duel-intent>strong{font-size:8px}
 .has-cinematic .beast-scene,.has-cinematic .episode-thread,.has-cinematic .result-strip{display:none}
 .has-cinematic .answers-heading{height:24px;min-height:24px}.has-cinematic .reader-controls{height:23px;min-height:23px}.has-cinematic .answers .answer-wrap .answer{height:68px!important;min-height:0!important}
 .life-report-board .motion-view{height:68px}.has-cinematic.is-living .motion-view{height:64px}
 .overlay>section.motion-dialog{max-height:96dvh;gap:5px;padding:8px}.motion-expanded{aspect-ratio:3.2;max-height:65dvh}.motion-dialog h2{font-size:13px}.motion-dialog p{display:none}.motion-expanded-controls button{font-size:10px;padding:5px 8px}
}
@media(max-width:600px) and (min-height:521px) and (max-height:620px){
 .motion-view{height:88px}.has-cinematic .answers .answer-wrap .answer,.has-cinematic .answers .answer-wrap .answer:has(.choice-odds){height:96px!important;min-height:96px!important;padding-block:5px}
 .has-cinematic .duel-hud>div>strong{display:none}.has-cinematic .duel-hud b{font-size:16px}
 .has-cinematic .answers-heading{height:26px;min-height:26px}.has-cinematic .reader-controls{height:26px;min-height:26px}.has-cinematic .reader-controls button{min-height:26px;padding-block:2px}
 .has-cinematic .reader-copy{font-size:14px;line-height:1.7}.has-cinematic .result-strip{display:none}
}
@media(prefers-reduced-motion:reduce){.motion-dialog,.story-cinematic{scroll-behavior:auto;transition:none}}
.cast-portrait{display:block;float:right;flex:none;width:64px;height:64px;margin:0 0 7px 9px;background-image:url('./assets/motion/actors-v3111.png');background-size:256px 3456px;background-position:0 calc(var(--cast-row)*-64px);background-repeat:no-repeat;image-rendering:pixelated;animation:cast-dialogue 1.8s steps(4) infinite}
.cast-portrait.still{animation:none!important}.atlas-dossier{display:flow-root}
.person-list-icon{flex:none;width:40px;height:40px;overflow:hidden}.person-list-icon .cast-portrait{float:none;margin:0;transform:scale(.625);transform-origin:top left}
.info-detail>.cast-portrait{float:none;margin:0 auto;width:96px;height:96px;background-size:384px 5184px;background-position-y:calc(var(--cast-row)*-96px);animation-name:cast-detail-dialogue}
@keyframes cast-dialogue{to{background-position-x:-256px}}
@keyframes cast-detail-dialogue{to{background-position-x:-384px}}
@media(prefers-reduced-motion:reduce){.cast-portrait{animation:none!important}}