/* Give the cast a substantial place beside the activity. */
@media(orientation:landscape){
 .play-scene{grid-template-columns:minmax(190px,250px) minmax(0,650px) minmax(190px,250px);gap:18px;padding-left:20px;padding-right:20px}
 .guide-character{width:250px;height:290px}
 .hero-character{width:260px;height:320px}
 .hero-zone{margin-bottom:35px}
 .activity-heading>img{width:155px;height:160px}
 .activity-view{gap:10px}
 .drawing-paper{max-width:calc((100dvh - 365px)*1.33333)}
 .highfive{height:280px;max-width:370px}
 .finale-heading>img{width:195px;height:195px}
}
@media(orientation:portrait){
 .play-scene{grid-template-rows:155px minmax(0,1fr)}
 .guide-zone{height:155px;justify-content:flex-start;gap:4px;padding-right:112px}
 .guide-character{width:125px;height:150px}
 .speech{width:auto;flex:1;min-width:0;font-size:15px;padding:11px 7px;min-height:72px}
 .hero-zone{top:0;bottom:auto;right:2px;width:122px;height:155px;justify-content:center}
 .hero-character{width:122px;height:155px}
 .activity-heading>img{width:115px;height:135px;flex-shrink:0}
 .activity-heading h1{font-size:23px}
 .activity-heading .eyebrow{letter-spacing:1px}
 .highfive{height:155px;max-width:285px}
 .reward-view{gap:8px}.reward-content{gap:8px}
 .finale-heading>img{width:115px;height:130px;flex-shrink:0}
 .finale-heading h1{font-size:24px}
}
@media(orientation:portrait) and (max-height:700px){
 .play-scene{grid-template-rows:132px minmax(0,1fr);padding-bottom:24px}
 .guide-zone{height:132px;padding-right:100px}
 .guide-character{width:107px;height:132px}
 .hero-zone{top:0;width:110px;height:132px}
 .hero-character{width:110px;height:132px}
 .speech{font-size:14px;padding:9px 6px}
 .work{gap:4px}.album-frame{max-width:min(100%,calc((100dvh - 435px)*1.33333))}
 .activity-heading>img{width:90px;height:100px}
 .activity-heading h1{font-size:20px}.activity-heading p{font-size:13px}
 .coloring-view .drawing-paper{max-width:248px}
 .coloring-view .activity-note{display:none}
 .activity-view{gap:5px}.memory-view .activity-note{display:none}
 .memory-board{max-width:285px;gap:7px}
 .highfive{height:135px}.reward-content{gap:4px}.reward-view{padding-bottom:32px}
 .finale-heading>img{width:95px;height:105px}.finale-heading h1{font-size:21px}
 .finale-view{gap:7px}.finale-heading .eyebrow{display:none}
}