/* Approved carousel presentation; host shell geometry and global styles remain in style.css. */
/* Shared loading carousel. The static rock panel and LEVEL title stay outside
   the clipped track; the existing cave frame paints above this entire screen. */
.level-loading{z-index:auto;background-position:center;background-size:cover;color:var(--ink);image-rendering:pixelated}
.loading-brand-overlay{display:none;position:absolute;z-index:4;top:1%;left:44%;width:12%;height:9%;object-fit:contain;cursor:pointer}
#stage:has(#level-loading:not([hidden])) .loading-brand-overlay{display:block}
.carousel-panel{position:absolute;z-index:3;left:28.25%;top:18%;width:43.5%;height:51%;background:url('assets/images/shared/shared-ui-carousel-shared-carousel-background.png') center/100% 100% no-repeat}
#carousel-level-title{position:absolute;z-index:2;left:0;right:0;top:-8%;height:31%;pointer-events:none}
#carousel-level-title img{width:76%;height:100%;object-fit:contain}
.carousel-loading-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.carousel-viewport{position:absolute;left:16%;right:12%;top:21%;bottom:9%;overflow:hidden;clip-path:inset(0)}
.carousel-track{height:100%;display:flex;will-change:transform}
.carousel-card{width:100%;height:100%;flex:0 0 100%;display:grid;grid-template-columns:32% 68%;align-items:start;gap:0;text-align:left;padding:15% 2% 0;position:relative}
.carousel-picture{width:100%;aspect-ratio:1;position:relative;overflow:hidden}
.carousel-picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask:url('assets/images/shared/shared-ui-carousel-shared-carousel-image-mask.png') center/100% 100% no-repeat;mask:url('assets/images/shared/shared-ui-carousel-shared-carousel-image-mask.png') center/100% 100% no-repeat}
.carousel-picture::after{content:"";position:absolute;inset:0;background:url('assets/images/shared/shared-ui-carousel-shared-carousel-imageframe.png') center/100% 100% no-repeat;pointer-events:none}
.carousel-words{align-self:start;padding-left:10%;padding-right:11%;min-width:0}
.carousel-words h2{position:absolute;top:0;left:0;right:0;font-family:var(--font-h1);font-size:3cqw;line-height:.9;margin:0;text-align:center;white-space:nowrap}
.carousel-meta{font-family:var(--font-h2);font-size:1.5cqw;line-height:1.05}
.carousel-meta span{display:block}
.carousel-copy{font-family:var(--font-h2);font-size:1.15cqw;line-height:1.08;margin-top:.3cqw;letter-spacing:.01em}
.carousel-dots{position:absolute;z-index:2;left:23%;right:57%;bottom:15%;display:flex;justify-content:center;gap:.35cqw}
.carousel-dots button{width:1.35cqw;height:1.35cqw;padding:0;background:url('assets/images/shared/shared-ui-carousel-shared-carousel-dotnav-inactive.png') center/contain no-repeat}
.carousel-dots button[aria-current="true"]{background-image:url('assets/images/shared/shared-ui-carousel-shared-carousel-dotnav-active.png')}
.carousel-arrow{position:absolute;z-index:4;top:39%;width:13%;height:25%;padding:0}
.carousel-arrow img{width:100%;height:100%}
.carousel-arrow:hover{filter:brightness(1.15)}
.carousel-arrow-left{left:0}.carousel-arrow-right{right:-4%}
.carousel-bottom{position:absolute;z-index:4;left:29%;top:65%;width:42%;height:15%;background:url('assets/images/shared/shared-ui-carousel-shared-loader-emptystate.png') center/100% 100% no-repeat}
.carousel-loader{position:absolute;inset:0;overflow:hidden}
.carousel-progress{position:absolute;inset:0;pointer-events:none}
.carousel-footprint{position:absolute;object-fit:fill}
.carousel-actions{position:absolute;inset:22% 8%;display:none;align-items:center;gap:3%;font-family:var(--font-h2)}
.is-ready .carousel-loader{display:none}.is-ready .carousel-actions{display:flex}
.carousel-actions button{width:50%;height:100%;border:2px solid #ffd185;background:transparent;color:#fff2a7;font-size:2.1cqw;line-height:1;white-space:nowrap}
.carousel-actions button:first-child{font-family:var(--font-body);font-size:1.3cqw;background:#211940bb;border-color:var(--yellow)}
.carousel-actions button:last-child{border:0;background:url('assets/images/shared/shared-ui-button-background-v-01.png') center/100% 100% no-repeat;font-family:var(--font-h1);font-size:2.7cqw}
.carousel-actions button:hover:not(:disabled){filter:brightness(1.2)}
.carousel-actions button:disabled{opacity:.45;cursor:default}
.is-preview .carousel-actions button:disabled{opacity:1}
.is-first-level .carousel-actions{justify-content:center}
.is-first-level .carousel-actions #carousel-continue{width:55%}
@media(max-width:600px){
 .carousel-words h2{font-size:3.2cqw}
 .carousel-actions button{border-width:1px}
}
@media(max-width:600px) and (orientation:portrait){
 #stage:has(#level-loading:not([hidden])){aspect-ratio:3/4}
 #stage:has(#level-loading:not([hidden])) .cave-frame{object-fit:fill;transform:none;left:0;top:0;width:100%;height:100%}
 .loading-brand-overlay{top:4%;left:37%;width:26%;height:10%}
 .carousel-panel{left:8%;top:25%;width:84%;height:auto;aspect-ratio:3/2}
 #carousel-level-title{top:-18%;height:30%}
 #carousel-level-title img{width:70%}
 .carousel-viewport{top:21%;bottom:9%;left:12%;right:12%}
 .carousel-card{grid-template-columns:27% 73%;padding-top:9%}
 .carousel-picture{width:92%}
 .carousel-words{padding-left:8%;padding-right:12%}
 .carousel-words h2{font-size:5.5cqw;white-space:normal;margin-bottom:2cqw}
 .carousel-meta{font-size:3.3cqw}
 .carousel-copy{position:static;font-size:2.85cqw;line-height:1.07;margin-top:.8cqw}
 .carousel-dots{display:none}
 .carousel-dots button{width:2.7cqw;height:2.7cqw}
 .carousel-arrow{width:16%;height:24%;top:40%}
 .carousel-arrow-left{left:0}.carousel-arrow-right{right:0}
 .carousel-bottom{left:8%;top:68%;width:84%;height:12%}
 .carousel-actions button{font-size:5cqw}.carousel-actions button:first-child{font-size:3cqw}.carousel-actions button:last-child{font-size:5.7cqw}
}
@media(prefers-reduced-motion:reduce){.carousel-track{transition:none!important}}

/* The host normally vertically centers its square gameplay stage on phones.
   Use the supplied top-aligned portrait composition only while the carousel is visible. */
@media(max-width:600px) and (orientation:portrait){body:has(#level-loading:not([hidden])) #app{margin:12px auto}}

/* Keep the old world and incomplete target artwork out of the loading screen. */
.level-loading.art-pending{background-color:#211940}
.art-pending .carousel-panel{visibility:hidden;pointer-events:none}