/* second-pass presentations (src/polish.js). Loaded last. Loops are transform / opacity only (compositor), and stop under
   prefers-reduced-motion. */

/* ---- energy refill countdown under the energy capsule (after_ch3_lobby.png) ---- */
#cur .capsule { position: relative; }
#cur .capsule .ecd { position: absolute; left: 0; right: 0; top: 100%; margin-top: 0.4cqw; text-align: center; font-style: normal; font-size: 2.8cqw; line-height: 1; color: #fff; text-shadow: 0 0.3cqw 0 #0a0820, 0.3cqw 0 0 #0a0820, -0.3cqw 0 0 #0a0820; pointer-events: none; }
#cur .capsule .ecd:empty { display: none; }

/* ---- red-dot badges of every RedNodeType ---- */
.rdb { position: absolute; right: -1.2cqw; top: -1.4cqw; z-index: 4; display: grid; place-items: center; pointer-events: none; }
.rdb > img { grid-area: 1 / 1; display: block; }
.rdb > b { grid-area: 1 / 1; color: #fff; line-height: 1; padding-top: calc(var(--kfix) * 2em); text-shadow: 0 0.25cqw 0 #7a0010; }
.rdn > img { width: 4.8cqw; height: 4.8cqw; } .rdn > b { font-size: 2.8cqw; }
.rdnew > img { width: 9cqw; height: 4.2cqw; } .rdnew > b { font-size: 2.6cqw; }
.rdb.btnbadge { right: -1.6cqw; top: -2cqw; }
img.dot.rdup, img.dot.rdsw { width: 5cqw !important; height: 5cqw !important; object-fit: contain; }
.tile .rdnew { right: -1.6cqw; top: -1.8cqw; } .tcard .rdnew { right: -1.6cqw; top: -1.6cqw; }

/* ---- lobby: menu button, side columns in their frames, magnifier, glitch title, boss hologram ---- */
.camp .menubtn { position: absolute; left: var(--sp4); top: 3cqw; z-index: 4; width: 11cqw; height: 11cqw; padding: 0; background: none; border: 0; }
.camp .menubtn img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0.6cqw 0 rgba(0,0,0,.35)); }
.camp .pil { position: absolute; top: 17cqw; z-index: 3; width: 17cqw; padding: 2cqw 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp3);
  border: 0 solid transparent; border-image: url(art/lb_pillar.png?v=8b68e5fd96) 28 14 fill / 3cqw 1.6cqw stretch; }
.camp .pil.l { left: 1.6cqw; } .camp .pil.r { right: 1.6cqw; }
.camp .pil .iconbtn, .camp .pil .fpil { position: relative !important; left: auto !important; right: auto !important; top: auto !important; }
.camp .pil .fpil { display: flex; flex-direction: column; align-items: center; gap: var(--sp3); }
.camp .pil .iconbtn { width: 15cqw; }
.camp .pil .iconbtn img:not(.dot) { width: 11cqw; height: 11cqw; animation: none; }
.camp .pil .iconbtn span { font-size: 2.6cqw; }
.ctitle { position: relative; max-width: 46cqw; margin-left: auto; margin-right: auto; text-align: center; word-break: keep-all; text-wrap: balance; }  /* long names wrap like the original (after_ch3_lobby.png) so the magnifier stays clear of the side icons */
.ctitle.glitch { text-shadow: -0.7cqw 0 0 rgba(0, 230, 255, .75), 0.7cqw 0 0 rgba(255, 60, 200, .6); }
.ctitle .cmag { position: absolute; right: -9cqw; top: 50%; transform: translateY(-50%); width: 7.6cqw; height: 7.6cqw; padding: 0; background: none; border: 0; }
.ctitle .cmag img { width: 100%; height: 100%; object-fit: contain; }
.cboss.holo { isolation: isolate; }
.cboss.holo > img.cholo { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: contain; z-index: -1; animation: none !important;
  transform: translate(2.4cqw, 0.4cqw) scale(1.06); opacity: .55; filter: brightness(0) saturate(100%) invert(56%) sepia(97%) saturate(1300%) hue-rotate(170deg) blur(0.2cqw) !important;
  -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 0.9cqw, transparent 0.9cqw 1.6cqw); mask-image: repeating-linear-gradient(0deg, #000 0 0.9cqw, transparent 0.9cqw 1.6cqw); }
.cboss.holo > img:not(.cholo) { -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 1.3cqw, rgba(0,0,0,.82) 1.3cqw 1.6cqw); mask-image: repeating-linear-gradient(0deg, #000 0 1.3cqw, rgba(0,0,0,.82) 1.3cqw 1.6cqw); }

/* ---- screen title 'i' (G9) ---- */
.scrtitle .scrinfo { width: 6.6cqw; height: 6.6cqw; padding: 0; background: none; border: 0; flex: none; }
.scrtitle .scrinfo img { width: 100%; height: 100%; object-fit: contain; }
.hlp p { margin: 0 0 var(--sp3); font-size: 3.6cqw; line-height: 1.45; color: #fff; text-align: left; }

/* ---- bottom tabs: Base icon ---- */
.tabs .tab[data-tab="base"] img:not(.dot) { object-fit: contain; }

/* ---- Base page (base.png): the Bestiary building on the base floor ---- */
.lobby.tab-base { background-image: url(art/bg_menu.jpg?v=8b68e5fd96); background-size: cover; background-position: center; }
.basev { flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: var(--sp4); position: relative; }
.bsmap { flex: 1; width: 100%; display: grid; place-items: center; }
.bsbld { position: relative; background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
.bsbld > img:first-child { width: 56cqw; height: auto; filter: drop-shadow(0 2cqw 0 rgba(0,0,0,.35)); }
.bsbld .bsname { margin-top: -2cqw; padding: calc(var(--kfix) * 2em) 4cqw 0; height: 7cqw; display: flex; align-items: center; font-size: 4.2cqw; color: #fff; background: rgba(10,8,30,.78); border-radius: 1cqw; }
.bsbld img.dot { right: 2cqw !important; top: 2cqw !important; }

/* ---- hangar: circuit lines from the slots to the plane, weapon slot highlighted (lobby_equip.png) ---- */
.gearstage .tile { overflow: visible; }
.gearstage .tile img.eqlink { position: absolute !important; top: 50%; width: 9cqw !important; height: auto !important; z-index: -1; opacity: .85; pointer-events: none; transform: translateY(-20%); }
.gearstage .tile img.eqlink.l { left: 92%; } .gearstage .tile img.eqlink.r { right: 92%; transform: translateY(-20%) scaleX(-1); }
.gearstage .gcol2 { position: relative; z-index: 1; }
.gearstage .tile.gold { box-shadow: 0 0 0 0.5cqw rgba(127, 243, 255, .65), 0 0 3cqw rgba(127, 243, 255, .55); }
.gearstage .tile.empty > img:not(.eqlink) { opacity: .45; filter: grayscale(.4) brightness(1.3); }

/* ---- research: cards stand still (no float) ---- */
.research .tcard { animation: none !important; }

/* ---- talent draw (CardDrawViewModule) ---- */
.tdv { background: rgba(48, 16, 88, .72) !important; justify-content: center; padding-top: 0 !important; }
.tdstage { position: relative; width: 100%; height: 72cqw; display: grid; place-items: center; }
.tdburst { position: absolute; width: 110cqw; height: 110cqw; opacity: 0; pointer-events: none; }
.tdcard { position: relative; width: 38cqw; aspect-ratio: .74; perspective: 120cqw; }
.tdback, .tdfront { position: absolute; inset: 0; backface-visibility: hidden; transition: transform .2s ease-in-out; }
.tdback img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 4cqw rgba(255,255,255,.75)); }
.tdfront { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; border: 0 solid transparent; border-image: url(art/fl_cardfront.png?v=8b68e5fd96) 30 fill / 3cqw stretch; filter: drop-shadow(0 0 3cqw var(--ca)); }
.tdfront img { width: 70%; height: 50%; object-fit: contain; } .tdfront .nm { font-size: 4.4cqw; } .tdfront b { font-size: 5cqw; color: #ffe46b; }
.tdcard.flipped .tdback { transform: rotateY(-180deg); } .tdcard.flipped .tdfront { transform: none; }
.tdbolts { position: absolute; inset: -20cqw 0 0; pointer-events: none; }
.tdbolt { position: absolute; top: 0; width: 16cqw; height: auto; transform-origin: 50% 0; margin-left: -8cqw; }
.tdres { visibility: hidden; display: flex; flex-direction: column; align-items: center; gap: var(--sp2); margin-top: var(--sp4); min-height: 30cqw; }
.tdres.on { visibility: visible; }
.tdname { font-size: 4.8cqw; } .tdlv { font-size: 6cqw; color: #fff; } .tdlv em, .tdstat em { font-style: normal; color: #7dff8a; } .tdlv i, .tdstat i { font-style: normal; font-size: .7em; color: #ffd84a; margin: 0 1cqw; }
.tdnew { color: #ff6b9b; margin-right: 1.4cqw; } .tdstat { font-size: 4.4cqw; color: #fff; } .tdnote { font-size: 3.4cqw; color: #dcd6ff; } .tdnote.gold { color: #ffd84a; } .tdnote img.ic { width: 4.4cqw !important; height: 4.4cqw !important; }
.tdv .gskip.tdskip { top: auto; bottom: 26cqw; }
.tdv .tapclose { position: absolute; bottom: 14cqw; left: 0; right: 0; text-align: center; }

/* ---- talent card detail (CardDetailViewModule) ---- */
.cdv { justify-content: center; padding-top: 0 !important; }
.cdwrap { display: flex; align-items: center; gap: var(--sp4); }
.cdcard { position: relative; width: 44cqw; aspect-ratio: .74; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; border: 0 solid transparent; border-image: url(art/fl_cardfront.png?v=8b68e5fd96) 30 fill / 3cqw stretch; filter: drop-shadow(0 0 2.4cqw var(--ca)); }
.cdcard img { width: 70%; height: 50%; object-fit: contain; } .cdcard .nm { font-size: 4.8cqw; } .cdcard b { font-size: 5.4cqw; color: #ffe46b; }
.cdnav { width: 9cqw; height: 12cqw; padding: 0; background: none; border: 0; } .cdnav img { width: 100%; height: 100%; object-fit: contain; } .cdnav.l img { transform: scaleX(-1); } .cdnav:disabled { opacity: .25; }
.cdinfo { margin-top: var(--sp5); display: flex; flex-direction: column; align-items: center; gap: var(--sp2); padding: 0 var(--sp5); text-align: center; }
.cdrar { font-size: 3.8cqw; } .cdnow { font-size: 5.2cqw; color: #fff; } .cdnext { font-size: 3.6cqw; color: #cfc8ff; } .cdnext em { font-style: normal; color: #7dff8a; }
.cdv .tapclose { margin-top: var(--sp5); }

/* ---- chapter detail (UILevelDetailViewModule) ---- */
.cdpop .cdsec { margin: var(--sp3) 0 var(--sp2); font-size: 3.6cqw; color: #ffd84a; text-align: left; }
.cdpop .cdgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp2); }
.cdpop .cdm { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 0 solid transparent; border-image: url(art/sk_slot.png?v=8b68e5fd96) 22 fill / 1.6cqw stretch; }
.cdpop .cdm img { width: 78%; height: 78%; object-fit: contain; }
.cdpop .cdm b { position: absolute; left: 0; right: 0; bottom: -0.6cqw; text-align: center; font-size: 2.6cqw; color: #ffd84a; }
.cdpop .cdm.boss b { color: #ff7a7a; }
.cdpop .btnrow { margin-top: var(--sp4); }

/* ---- menu (settings) and Bag ---- */
.mnpop .mnrow { display: flex; align-items: center; justify-content: space-between; padding: var(--sp3) var(--sp2); font-size: 4.2cqw; color: #fff; }
.mnpop .mnrow img.ic { width: 6cqw !important; height: 6cqw !important; vertical-align: middle; margin-right: 1.4cqw; }
.bgpop .bggrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp2); }
.bgpop .bgi { position: relative; background: none; padding: 0; } .bgpop .bgi.on { filter: drop-shadow(0 0 1.4cqw #7ff3ff); }
.bgpop .bgi .bgbp { position: absolute; left: 0.4cqw; top: 0.4cqw; width: 38% !important; height: 38% !important; }
.bgpop .bginfo { margin-top: var(--sp4); min-height: 14cqw; padding: var(--sp3); font-size: 3.6cqw; color: #fff; line-height: 1.4; background: rgba(10,8,30,.45); border-radius: 1.6cqw; text-align: left; }
.bgpop .bginfo span { color: #cfc8ff; } .bgempty { padding: var(--sp5) 0; text-align: center; color: #cfc8ff; font-size: 3.8cqw; }

/* ---- battle power window (BattlePowerShowViewModule) ---- */
.pwshow { position: absolute; left: 50%; top: 32%; z-index: 60; display: flex; align-items: center; gap: 1.4cqw; padding: 1.6cqw 4cqw; background: rgba(10,8,30,.78); border-radius: 3cqw; pointer-events: none; }
.pwshow img.ic { width: 6.4cqw !important; height: 6.4cqw !important; }
.pwshow .pwv { font-size: 6.4cqw; color: #fff; min-width: 14cqw; } .pwshow .pwar { width: 5.4cqw; height: auto; }
.pwshow em { font-style: normal; font-size: 5cqw; } .pwshow em.up { color: #7dff8a; } .pwshow em.down { color: #ff6b6b; }

/* ---- weapon preview (equip_slot_detail.png) ---- */
.wppop .wpstage { position: relative; height: 70cqw; display: grid; place-items: center; overflow: hidden; border-radius: 2cqw; background: radial-gradient(ellipse at 50% 78%, rgba(90, 220, 255, .55), rgba(30, 60, 160, .9) 45%, #10184a); }
.wppop .wpname { position: absolute; left: var(--sp3); top: var(--sp3); max-width: 40cqw; font-size: 4.6cqw; color: #fff; text-align: left; }
.wppop .wpburst { position: absolute; width: 80cqw; height: 80cqw; opacity: .35; }
.wppop .wpbig { position: relative; width: 38cqw; height: 38cqw; object-fit: contain; filter: drop-shadow(0 2cqw 0 rgba(0,0,0,.3)); animation: bob 2.4s ease-in-out infinite; }
.wppop .wprep { position: absolute; bottom: var(--sp4); left: 50%; transform: translateX(-50%); min-width: 34cqw; }
.wppop .wpskill { margin-top: var(--sp3); padding: var(--sp3); border-radius: 1.6cqw; border: 0 solid transparent; border-image: url(art/lb_cream.png?v=8b68e5fd96) 30 fill / 2cqw stretch; }
.wppop .wpsh { text-align: center; font-size: 3.4cqw; color: #7a6a58; margin-bottom: var(--sp2); }
.wppop .wprow { display: flex; align-items: center; gap: var(--sp3); color: #3a2c20; font-size: 3.8cqw; } .wppop .wprow em { font-style: normal; color: #b8620a; }
.wppop .wpic { width: 12cqw; height: 12cqw; display: grid; place-items: center; border: 0 solid transparent; border-image: url(art/sk_slot_gold.png?v=8b68e5fd96) 22 fill / 1.6cqw stretch; } .wppop .wpic img { width: 80%; height: 80%; object-fit: contain; }
.wppop .wpdet { margin-top: var(--sp3); width: 100%; }
.wppick .wpgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp2); } .wppick .wpcell .tile { width: 100%; }

/* ---- patrol scene (HangUpAnim): the landscape scrolls (two copies, transform only), the plane bobs ---- */
.patrolpop .ptscene2 { position: relative; overflow: hidden; width: calc(100% + 1.2cqw); margin: -0.6cqw -0.6cqw 0; aspect-ratio: 1100 / 224; border-radius: 2cqw 2cqw 0 0; }
.ptland { position: absolute; inset: 0; display: flex; width: 200%; animation: ptscroll 12s linear infinite; }
.ptland img { width: 50%; height: 100%; object-fit: cover; display: block; }
.ptplane { position: absolute; left: 30%; top: 8%; width: 24%; height: auto; animation: ptbob 2s ease-in-out infinite; }
@keyframes ptscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ptbob { 0%, 100% { transform: translate(0, 0) rotate(-2deg); } 50% { transform: translate(0, 14%) rotate(2deg); } }
.pttime[data-st="disable"] { color: #b8b4cc !important; } .pttime[data-st="normal"] { color: #ffffff !important; } .pttime[data-st="max"] { color: #ff4b4b !important; }

/* ---- result idle loop (Anim_UIFX_JieSuan_Idle 1.6 s) ---- */
.result.rvloop { position: relative; }
.result .rvburst { position: absolute; left: 50%; top: -16cqw; width: 64cqw; height: 64cqw; margin-left: -32cqw; z-index: -1; opacity: .55; pointer-events: none; animation: rvspin 6.4s linear infinite; }
.result .rvspark { position: absolute; width: 6cqw; height: auto; pointer-events: none; z-index: 3; animation: rvtw 1.6s ease-in-out infinite; }
.result .rvspark.s0 { left: 22%; top: -6cqw; } .result .rvspark.s1 { right: 20%; top: -9cqw; animation-delay: -.4s; } .result .rvspark.s2 { left: 30%; top: 6cqw; animation-delay: -.8s; width: 4.4cqw; } .result .rvspark.s3 { right: 28%; top: 4cqw; animation-delay: -1.2s; width: 4.4cqw; }
.result.won .face { animation: rvface 1.6s ease-in-out infinite; }
.result.lost .face { animation: rvsad 1.6s ease-in-out infinite; }
@keyframes rvspin { to { transform: rotate(360deg); } }
@keyframes rvtw { 0%, 100% { transform: scale(.3) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@keyframes rvface { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.2cqw) scale(1.04); } }
@keyframes rvsad { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(0.6cqw); } }

/* ---- starter pack title (starter_pack_popup.png: big tilted title) ---- */
.sp .sptitle { transform: rotate(-5deg) skewX(-8deg); font-size: 9cqw !important; letter-spacing: -0.2cqw; color: #fff6c8; text-shadow: 0 0.8cqw 0 #c2410c, 0.4cqw 0 0 #7a1f00, -0.4cqw 0 0 #7a1f00, 0 -0.4cqw 0 #7a1f00, 0 1.2cqw 0 #7a1f00; }

@media (prefers-reduced-motion: reduce) { .ptland, .ptplane, .result .rvburst, .result .rvspark, .result .face, .wppop .wpbig { animation: none !important; } }