/* Original client-derived, alpha-cut character renders over the native MU scenery.
   Decorative layers never receive focus or pointer input. */
body{
 --mu-left-art:url('assets/optimized/c90fe550f385d25fe5df07c2.webp');
 --mu-right-art:url('assets/optimized/fdeea63d0aee68ac50365343.webp');
 isolation:isolate;
}
body[data-page="tin-tuc"]{
 --mu-left-art:url('assets/optimized/8f30aa874a5954fc047f0be1.webp');
 --mu-right-art:url('assets/optimized/69d184a26139a8377a13362f.webp');
}
body[data-page="gio-su-kien"]{
 --mu-left-art:url('assets/optimized/53e18977545a16d07e6a72a2.webp');
 --mu-right-art:url('assets/optimized/1a89186a48010fa0dfca4e4b.webp');
}
body[data-page="tai-game"]{
 --mu-left-art:url('assets/optimized/5175c1238665fbca51b6122e.webp');
 --mu-right-art:url('assets/optimized/a2c5323bcc9343ffa6156253.webp');
}
.mu-world-backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none}
.mu-world-mist{position:absolute;inset:0;background:linear-gradient(90deg,#080c1070,transparent 22%,transparent 78%,#080c1070),url('assets/ornaments/silver-cloud-scrolls.svg') center bottom/1300px auto repeat-y;opacity:.28}
.site-shell--simple{position:relative;z-index:1}
.hero--split{z-index:1}
.utility{position:relative;z-index:2}

/* Each view opens with a pair of soft, frameless silhouettes. */
.page-heading{position:relative;isolation:isolate;min-height:235px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.page-heading::before,.page-heading::after{content:'';position:absolute;z-index:-1;top:2px;bottom:-30px;width:30%;max-width:300px;background-repeat:no-repeat;background-position:center top;background-size:contain;pointer-events:none;opacity:.34;filter:grayscale(.9) sepia(.08) brightness(1.5);mask-image:linear-gradient(#000 40%,transparent 95%)}
.page-heading::before{left:0;background-image:var(--mu-left-art)}
.page-heading::after{right:0;background-image:var(--mu-right-art)}
.page-heading p,.page-heading .page-kicker{max-width:68%}

/* Every passage uses separate artwork; character images are never tiled. */
.roadmap-list::after,.simple-frame::after,.dialog-frame::after{
 content:'';position:absolute;z-index:-1;inset:10px;pointer-events:none;
 background-image:var(--mu-left-art),var(--mu-right-art);
 background-position:left 40px,right 420px;
 background-size:350px auto,330px auto;background-repeat:no-repeat;
 filter:grayscale(.9) sepia(.08) brightness(1.6);opacity:.14;
 mask-image:linear-gradient(90deg,#000,transparent 43%,transparent 57%,#000);
}
.news-board::after,.download-board::after,.dialog-frame::after{background-repeat:no-repeat;background-position:left bottom,right top;background-size:45% auto,45% auto;opacity:.21}
.news-board::after,.download-board::after{background-image:var(--mu-panel-left-art),var(--mu-panel-right-art)}
.dialog-frame::after{background-image:url('assets/optimized/e64af3a8946c0ccdf9d9ee00.webp');background-size:100% auto;background-position:center bottom}
.roadmap-list::after,.schedule-board::after{display:none}
.dialog-frame{position:relative;isolation:isolate}
.roadmap-stage{isolation:isolate}
.roadmap-stage::after{content:'';position:absolute;z-index:-1;inset:18px 0;background:var(--mu-stage-art) right center/auto min(95%,390px) no-repeat;opacity:.14;filter:grayscale(.9) brightness(1.6);mask-image:linear-gradient(90deg,transparent 35%,#000);pointer-events:none}
.mu-scene-passages{position:absolute;inset:20px;z-index:-1;overflow:hidden;pointer-events:none}
.mu-scene-passage{position:absolute;left:0;right:0;height:480px;transform:translateY(-12%);background:var(--mu-passage-art) left center/auto 95% no-repeat;opacity:.16;filter:grayscale(.9) sepia(.08) brightness(1.6);mask-image:linear-gradient(transparent,#000 25%,#000 70%,transparent)}
.mu-scene-passage:nth-child(even){background-position:right center}
.mu-scene-passage:last-child{background-size:auto 95%;height:400px;opacity:.15}

/* Keep native dragon tops; join the bottom with the client's soft scroll ends. */
.roadmap-list::before,.simple-frame::before{bottom:48px;border-bottom-width:0}
.mu-frame-foot{position:absolute;z-index:2;left:-5px;right:-5px;bottom:-5px;height:75px;pointer-events:none;background:url('assets/optimized/cb7d2483217324bed896e8b0.webp') left bottom/132px auto no-repeat,url('assets/optimized/6111e30462606d2761ea7cb9.webp') right bottom/132px auto no-repeat,linear-gradient(90deg,transparent,#bdc4cb88 12%,#bdc4cb88 88%,transparent) center bottom/calc(100% - 180px) 1px no-repeat;filter:grayscale(1) brightness(1.15)}
.roadmap-story,.opening-details,.news-title,.download-board p{text-shadow:0 2px 4px #000,0 0 10px #0008}
.simple-footer{position:relative;isolation:isolate}
.simple-footer::after{content:'';position:absolute;z-index:-1;inset:10px 0 0;background:url('assets/optimized/4e147198d60cceae74accd82.webp') center/auto 160px no-repeat;opacity:.13;filter:grayscale(1);pointer-events:none;mask-image:linear-gradient(transparent,#000 45%,transparent)}
@media(max-width:1000px){
 .page-heading::before,.page-heading::after{width:26%;opacity:.28}
}
@media(max-width:700px){
 .page-heading{min-height:225px;padding-left:12px;padding-right:12px}
 .page-heading::before,.page-heading::after{top:23px;bottom:0;width:40%;opacity:.2;background-size:auto 180px}
 .page-heading::before{left:-12%}.page-heading::after{right:-12%}
 .page-heading p,.page-heading .page-kicker{max-width:92%}
 .roadmap-list::after,.simple-frame::after,.dialog-frame::after{inset:6px;background-size:200px auto,190px auto;background-position:left 60px,right 330px;opacity:.11;mask-image:linear-gradient(90deg,#000,transparent 48%,#000)}
 .news-board::after,.download-board::after,.dialog-frame::after{background-position:left bottom,right top;background-size:65% auto,65% auto;opacity:.15}
 .roadmap-stage::after{background-size:auto 85%;opacity:.07}
 .mu-scene-passages{inset:10px}.mu-scene-passage{height:320px;background-size:auto 90%;opacity:.12}.mu-scene-passage:last-child{height:240px;background-size:auto 90%}
 .roadmap-list::before,.simple-frame::before{bottom:35px}
 .mu-frame-foot{left:-3px;right:-3px;bottom:-3px;height:54px;background-size:96px auto,96px auto,calc(100% - 130px) 1px}
}