/* Illustrated art pass. Nine-slice frames keep their corners at every viewport. */
/* Keep the complete story composition on tall phones and 4:3 tablets. */
.intro-card{isolation:isolate;background:#c5d59a}
.intro-card:before{content:"";position:absolute;inset:-24px;z-index:0;background:url('assets/art-v2/bg-treetops-twigbridges-intro-landscape.webp') center/cover no-repeat;filter:blur(20px);pointer-events:none}
.intro-card picture{position:relative;z-index:1}
.intro-card picture img{object-fit:contain}
@media(orientation:portrait){.intro-card:before{background-image:url('assets/art-v2/bg-treetops-twigbridges-intro-portrait.webp')}}
.board,.panel,#menuPanel .panel{isolation:isolate;border:0;background:none;box-shadow:none;border-radius:28px}
.board:before,.panel:before,#menuPanel .panel:before{content:"";position:absolute;inset:0;width:auto;height:auto;z-index:-1;transform:none;filter:none;border:46px solid transparent;border-image:url('assets/art-v2/ui-board.webp') 190 fill / 46px / 0 stretch;border-radius:0;background:none;pointer-events:none}
#menuPanel .panel:after{display:none}
.panel,#menuPanel .panel{padding:40px 32px 32px;filter:drop-shadow(0 12px 18px #35291c33)}
.board{filter:drop-shadow(0 8px 10px #35291c26)}
.speech{border:0;border-radius:0;background:transparent url('../assets/ui/ori-speech-normal.webp') center/100% 100% no-repeat;box-shadow:none;padding:18px 18px 18px 26px}
.speech:before{display:none}
.level-dot,.level-dot.current,.level-dot.complete,.level-choice,.level-choice.current,.level-choice.complete{background-image:url('assets/art-v2/ui-level-feather.webp');background-size:115% 115%;text-shadow:0 1px 2px #fff8e6,1px 0 2px #fff8e6,-1px 0 2px #fff8e6;filter:drop-shadow(0 2px 2px #63462633)}
.level-dot.current,.level-choice.current{filter:drop-shadow(0 0 4px #fff5be);color:#51331f}
.level-dot:not(.current):not(.complete){filter:saturate(.35);opacity:.8}
.level-choice:disabled{filter:saturate(.2);opacity:.55}
.level-track:before,.menu-levels:before,.hero-zone:after{border:0;box-shadow:none;background:transparent url('assets/art-v2/prop-straight-stick.webp') 50% 49.3% / 103.8% 426% no-repeat;border-radius:0}
.round-track{border:0;background:#f9efd9;border-radius:24px;box-shadow:0 2px 4px #70553122}
.round-dot{opacity:.55;filter:grayscale(1)}
.round-dot.complete{filter:drop-shadow(0 1px 2px #bd7d3166)}
.twig:before{left:0;right:0;height:20px;border:0;border-radius:0;box-shadow:none;background:transparent url('assets/art-v2/prop-straight-stick.webp') 50% 49.3% / 103.8% 426% no-repeat}
.twig:after,.branch-end:before,.branch-end:after{display:none}
.branch-end{height:22px;border:0;box-shadow:none;background:transparent url('assets/art-v2/prop-straight-stick.webp') 50% 49.3% / 103.8% 426% no-repeat;filter:drop-shadow(0 2px 2px #53382533)}
.twig,.twig[data-units]{filter:drop-shadow(0 2px 2px #53382533)}
.clear-button{border:0;border-radius:0;box-shadow:none;background:transparent url('assets/art-v2/button-eraser.webp') center/contain no-repeat;filter:drop-shadow(0 3px 2px #53382533)}
.clear-button:before,.clear-button:after{display:none}
.clear-button:disabled{opacity:.55;filter:saturate(.5)}
.icon-button,.guide-button{filter:drop-shadow(0 3px 3px #53382533)}
.highfive-art{width:220px;height:145px;object-fit:cover;object-position:50% 49%;filter:drop-shadow(0 3px 3px #53382522)}
.final-stars img{object-fit:contain;filter:drop-shadow(0 2px 2px #b07e3533)}
.juice-feather{background-image:url('assets/art-v2/ui-level-feather.webp')}
@media(orientation:portrait),(max-width:700px){
 .board:before,.panel:before,#menuPanel .panel:before{border-width:27px;border-image-width:27px}
 .panel,#menuPanel .panel{padding:32px 17px 24px}
 .speech{padding:12px 13px 12px 21px}
 .twig:before{height:18px}.branch-end{height:19px}
 .highfive-art{width:180px;height:116px}
}
@media(max-width:380px) and (max-height:700px){
 .panel,#menuPanel .panel{padding:26px 14px 19px}
 .highfive-art{width:160px;height:104px}
 .twig:before{height:16px}.branch-end{height:17px}
}

.twig:before{border-radius:999px}
@media(orientation:portrait),(max-width:700px){.hero-zone{width:110px;height:142px}}
@media(max-width:380px) and (max-height:700px){.hero-zone{width:92px;height:118px}}