/* Native 2434px gameplay: colored faction aura, rotating seal, and continue ring. */
.r-hd-cinematic .r-cg-scene{--faction-rgb:169,124,70;--faction-light:#e0b67d;inset:0;background:#050605;overflow:hidden;animation:r-native-scene-in .22s linear both}
.r-hd-cinematic [data-faction="위"]{--faction-rgb:73,111,160;--faction-light:#98bfe7}
.r-hd-cinematic [data-faction="촉"]{--faction-rgb:52,133,68;--faction-light:#93d49d}
.r-hd-cinematic [data-faction="오"]{--faction-rgb:159,50,41;--faction-light:#f2a393}
.r-hd-cinematic .r-cg-atmosphere{position:absolute;inset:-4%;pointer-events:none;background:radial-gradient(ellipse at 70% 43%,rgba(var(--faction-rgb),.2),transparent 63%);opacity:.9;transition:opacity .38s ease}
.r-hd-cinematic .r-cg-ghost{left:-10%;top:-20%;width:74%;height:145%;opacity:.23;filter:grayscale(.45) sepia(.12);transform:scale(1.1);mix-blend-mode:screen;transition:opacity .18s ease,transform .35s ease;z-index:1}
.r-hd-cinematic .r-cg-hero{left:3%;top:1%;bottom:auto;width:45%;height:98%;z-index:3;filter:drop-shadow(0 0 20px rgba(var(--faction-rgb),.15));animation:r-native-officer-in .37s cubic-bezier(.16,.7,.25,1) both;transition:left .25s ease,width .25s ease,top .25s ease,height .25s ease}
.r-hd-cinematic .r-cg-name{left:44.5%;top:20%;z-index:4;font-size:clamp(24px,2.8vw,47px);color:#d99864;animation:r-cg-panel-in .25s ease-out .25s both}
.r-hd-cinematic .r-cg-medallion,
.r-hd-cinematic.is-intro .r-cg-medallion{position:absolute;left:73%;top:46%;width:min(52vw,88dvh);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);border:0;border-radius:0;box-shadow:none;background:none;opacity:1;z-index:2;isolation:auto;mix-blend-mode:screen;animation:r-hd-seal-enter .35s ease-out both;transition:left .22s cubic-bezier(.18,.7,.15,1),top .28s ease,opacity .28s ease;pointer-events:none}
.r-hd-cinematic .r-cg-medallion::before,.r-hd-cinematic .r-cg-medallion::after{display:none}
.r-hd-cinematic .r-cg-faction-film{position:absolute;width:113.1687%;height:100%;left:5.2469%;top:-4.5267%;max-width:none;object-fit:fill;mix-blend-mode:normal;mask-image:linear-gradient(90deg,transparent,#000 9% 95%,transparent);image-rendering:auto;background:transparent;transform:none}
.r-hd-cinematic .r-cg-faction-letter{position:absolute;inset:16%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:min(29vw,49dvh);font-weight:700;letter-spacing:0;line-height:1;color:var(--faction-light);text-shadow:0 0 8px rgba(var(--faction-rgb),.65),0 0 28px rgba(var(--faction-rgb),.45);filter:none;transform:translateY(-.04em);padding:0;margin:0}
.r-hd-cinematic.is-details .r-cg-medallion{left:20%;top:46%;width:min(52vw,88dvh);opacity:.67;transform:translate(-50%,-50%);animation:none}
.r-hd-cinematic.is-details .r-cg-ghost{opacity:0;transform:scale(1)}
.r-hd-cinematic.is-details .r-cg-atmosphere{opacity:.55}
.r-hd-cinematic.is-details .r-cg-hero{left:11%;top:5%;width:37%;height:90%}
.r-hd-cinematic.is-details .r-cg-name{left:44.5%;animation:none}
.r-hd-cinematic.is-details .r-cg-information{left:51%;right:4%;top:10%;bottom:10%;z-index:4;background:linear-gradient(100deg,rgba(var(--faction-rgb),.2),rgba(var(--faction-rgb),.04));animation:r-hd-detail-enter .28s ease-out .1s both}
.r-hd-cinematic .r-cg-dust i{background:var(--faction-light,#d2b17c);box-shadow:none;opacity:0}
.r-hd-cinematic .r-cg-continue{display:block;position:absolute;inset:0;z-index:10;width:100%;height:100%;border:0;background:none;cursor:pointer;padding:0;color:#e1d2b5;text-shadow:0 2px 3px #000;animation:none}
.r-hd-cinematic .r-cg-continue-label{position:absolute;left:50%;bottom:2.3%;transform:translateX(-50%);font-size:clamp(12px,1.1vw,17px);line-height:1.5;white-space:nowrap}
.r-hd-cinematic .r-cg-continue-ring{position:absolute;right:17%;bottom:6.5%;width:clamp(34px,3.3vw,66px);height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 0 3px #c9b66d55)}
.r-hd-cinematic .r-cg-continue:focus-visible{outline:2px solid #f0d391;outline-offset:-6px}
@keyframes r-hd-seal-enter{from{opacity:0;filter:brightness(1.35)}to{opacity:1;filter:none}}
@keyframes r-hd-detail-enter{from{opacity:0;transform:translateX(4%)}to{opacity:1;transform:none}}
@media(max-width:900px){
 .r-hd-cinematic.is-details .r-cg-information{left:51%;right:2%;top:10%;bottom:10%;padding:10px}
 .r-hd-cinematic .r-cg-name{left:44%;font-size:26px}
 .r-hd-cinematic .r-cg-faction-letter{font-size:min(30vw,50dvh)}
}
@media(max-width:600px) and (orientation:portrait){
 .r-hd-cinematic .r-cg-hero{left:-4%;top:1%;width:65%;height:65%}
 .r-hd-cinematic .r-cg-ghost{left:-16%;top:-6%;width:94%;height:83%}
 .r-hd-cinematic .r-cg-name{left:54%;top:14%;font-size:25px}
 .r-hd-cinematic .r-cg-medallion,.r-hd-cinematic.is-intro .r-cg-medallion{left:64%;top:41%;width:80vw}
 .r-hd-cinematic.is-details .r-cg-medallion{left:26%;top:28%;width:80vw;opacity:.5}
 .r-hd-cinematic.is-details .r-cg-hero{left:7%;top:0;width:58%;height:50%}
 .r-hd-cinematic.is-details .r-cg-name{left:61%;top:8%}
 .r-hd-cinematic.is-details .r-cg-information{left:5%;right:5%;top:50%;bottom:8%;padding:10px 12px}
 .r-hd-cinematic .r-cg-faction-letter{font-size:47vw}
 .r-hd-cinematic .r-cg-continue-ring{right:6%;bottom:3%;width:37px}
 .r-hd-cinematic .r-cg-continue-label{bottom:3.6%;left:43%;font-size:12px}
}
@media(max-height:550px) and (min-width:600px){
 .r-hd-cinematic.is-details .r-cg-information{top:5%;bottom:8%;padding:8px 12px}
 .r-hd-cinematic .r-cg-name{font-size:26px;top:18%}
 .r-hd-cinematic .r-cg-continue-label{bottom:1%;font-size:12px}
 .r-hd-cinematic .r-cg-continue-ring{right:12%;bottom:3%;width:34px}
}

.r-hd-cinematic .r-cg-atmosphere{background-image:radial-gradient(ellipse at 65% 48%,transparent 12%,#0009 90%),url(assets/recruit-cg-qun-background.webp);background-size:100% 100%,100% 100%;background-repeat:no-repeat;opacity:.72}
.r-hd-cinematic [data-seal="wei"] .r-cg-atmosphere{background-image:radial-gradient(ellipse at 65% 48%,transparent 12%,#0009 90%),url(assets/recruit-cg-wei-background.webp)}
.r-hd-cinematic [data-seal="shu"] .r-cg-atmosphere{background-image:radial-gradient(ellipse at 65% 48%,transparent 12%,#0009 90%),url(assets/recruit-cg-shu-background.webp)}
.r-hd-cinematic [data-seal="wu"] .r-cg-atmosphere{background-image:radial-gradient(ellipse at 65% 48%,transparent 12%,#0009 90%),url(assets/recruit-cg-wu-background.webp)}

.r-gold-transition .r-gold-wash,.r-gold-transition .r-gold-shade,.r-gold-transition .r-gold-veil{animation-duration:var(--gold-transition-duration,600ms)}

.r-hd-cinematic.is-rare .r-cg-medallion{border:0;box-shadow:none}
.r-hd-cinematic .r-cg-dust{display:none}