/* screen framework layers, reward window, fly icons, loading, milestone carousel, unlock / level-up popups, guide hand
   (src/view.js, src/ui.js). Every frame is generated art (sk_* 9-slice, fx_*, ui_*), no CSS-drawn boxes. */
#cur { position: absolute !important; top: 0; left: 0; right: 0; z-index: 12 !important; pointer-events: none; justify-content: flex-end; transition: filter .2s; }
#cur .capsules { pointer-events: auto; }
#cur.dimmed { filter: brightness(.28); }
#fx { position: absolute; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
#mask { position: absolute; inset: 0; z-index: 90; background: transparent; }
.flyi { position: absolute; left: 0; top: 0; object-fit: contain; will-change: transform; filter: drop-shadow(0 0.4cqw 0 rgba(0,0,0,.3)); }
/* lobby top bar: the capsules live in the currency layer now; keep the row height */
.lobby .topbar { min-height: 15cqw; }

/* loading screen (original 'Loading game…': dark gray, gray hex emblem, white text) */
#loadv, #loading { position: absolute; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; background: #1f1e24; font-size: 4cqw; color: #fff; }
#loadv img, #loading img { width: 24cqw; height: auto; opacity: .9; }
#loadv b, #loading b { font-size: 4.2cqw; letter-spacing: .02em; }
#loading { font-weight: 400; font-family: var(--ui-font, inherit); }

/* common reward window */
.rwc { justify-content: center; padding: 0; background: rgba(8,6,24,.78); }
.rwc-in { position: relative; width: 88cqw; display: flex; flex-direction: column; align-items: center; gap: 2.4cqw; }
.rwc-burst { position: absolute; left: 50%; top: 50%; width: 130cqw; max-width: none; margin: -65cqw 0 0 -65cqw; opacity: .5; pointer-events: none; z-index: -1; animation: rwspin 9s linear infinite; }
@keyframes rwspin { to { transform: rotate(360deg); } }
.rwc-title { width: 72% !important; margin: 0 auto !important; }
.rwc-panel { width: 100%; padding: 4.4cqw 3cqw; border: 0 solid transparent; border-image: url(art/sk_panel.png?v=8b68e5fd96) 26 fill / 3.4cqw stretch; }
.rwc-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 3cqw; max-height: 52cqh; overflow-y: auto; }
.rwc .tapclose { margin-top: 5cqh; font-size: 3.6cqw; }
.rwc .lvhead { display: flex; flex-direction: column; align-items: center; gap: 1cqw; }
.rwc .lvhead img { width: 46cqw; height: auto; filter: drop-shadow(0 1cqw 0 rgba(0,0,0,.3)); }
.rwc .lvhead b { font-size: 9cqw; color: #ffe46b; line-height: 1; text-shadow: -0.4cqw 0 #5a2a00, 0.4cqw 0 #5a2a00, 0 -0.4cqw #5a2a00, 0 0.6cqw #5a2a00; }
.rwc .lvhead small { font-size: 3.8cqw; color: #fff; }

/* new feature unlocked (FunctionOpenViewModule, UIFX_SystemUnlock_Show 1.75 s) */
.ulv { justify-content: flex-start; padding-top: 12cqh; background: rgba(5,5,18,.8); }
.ulv .ulband2 { width: 104cqw; height: 11cqw; display: flex; align-items: center; justify-content: center; padding-top: calc(var(--kfix) * 2em); font-size: 5.4cqw; color: #fff;
  border: 0 solid transparent; border-image: url(art/fl_band.png?v=8b68e5fd96) 16 fill / 1.07cqw stretch; filter: hue-rotate(118deg) saturate(1.5) brightness(1.35); visibility: hidden; }
.ulv .ulband2 { text-shadow: -0.3cqw 0 #6a3200, 0.3cqw 0 #6a3200, 0 -0.3cqw #6a3200, 0 0.4cqw #6a3200; }
.ulv .ulbox { position: relative; margin-top: 12cqh; width: 56cqw; height: 56cqw; display: grid; place-items: center; overflow: visible; }
.ulv .ulbox > * { grid-area: 1 / 1; }
.ulv .ulburst { position: absolute; left: 50%; top: 50%; width: 120cqw; height: 120cqw; margin: -60cqw 0 0 -60cqw; max-width: none; opacity: 0; pointer-events: none; }
.ulv .uldia { width: 46cqw; opacity: 0; }
.ulv .ulic { width: 22cqw; height: 22cqw; object-fit: contain; opacity: 0; margin-top: -3cqw; filter: drop-shadow(0 0.8cqw 0 rgba(0,0,0,.3)); }
.ulv .ullock { width: 20cqw; height: 20cqw; object-fit: contain; }
.ulv .ulname { position: relative; z-index: 2; align-self: end; margin-bottom: 9cqw; font-size: 4.6cqw; color: #fff; }
.ulv .ultext2 { margin-top: 3cqh; font-size: 6cqw; color: #fff; opacity: 0; }
.ulv .ultext2 em { font-style: normal; color: #ffe84a; }
.ulv .tapclose { margin-top: auto; margin-bottom: 9cqh; font-size: 3.6cqw; }
.ulfly { position: absolute; left: 0; top: 0; pointer-events: none; display: grid; place-items: center; will-change: transform; }
.ulfly > * { grid-area: 1 / 1; } .ulfly .uldia { width: 100%; } .ulfly .ulic { width: 48%; height: 48%; object-fit: contain; }
/* a feature that is being revealed by the fly: kept invisible until the icon lands */
.appear { visibility: hidden; }

/* lobby goal button: 'To Be Claimed' loop (UIMissionRewardUnclaimed 1.67 s) */
.goal.ready > img:first-child { animation: unclaimed 1.67s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes unclaimed { 0%, 40%, 100% { transform: none; } 8% { transform: rotate(-12deg) scale(1.12); } 16% { transform: rotate(10deg) scale(1.12); } 24% { transform: rotate(-6deg) scale(1.06); } 32% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .goal.ready > img:first-child, .rwc-burst { animation: none; } }

/* stage clear rewards (MissionRewardViewModule, full screen; chapter_reward_claim.png) */
.msv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; background: #1b1e6b url(art/bg_menu.jpg?v=8b68e5fd96) center / cover no-repeat; padding-top: 18cqw; overflow: hidden; }
.msv .ribbon-t { width: 70% !important; margin: 0 auto !important; }
.mscar { position: relative; width: 100%; height: 66cqw; margin-top: 2cqw; touch-action: pan-y; }
.mstrack { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; will-change: transform; }
.msnode { position: absolute; top: 50%; width: 44cqw; height: 50cqw; margin: -25cqw 0 0 -22cqw; display: grid; place-items: center; transition: transform .5s cubic-bezier(.25,.46,.45,.94), filter .5s; transform: scale(.68); filter: brightness(.85); cursor: pointer; }
.msnode > * { grid-area: 1 / 1; }
.msnode .msglow { position: absolute; left: 50%; top: 50%; width: 80cqw; height: 80cqw; margin: -40cqw 0 0 -40cqw; max-width: none; opacity: 0; transition: opacity .5s; pointer-events: none; z-index: -1; }
.msnode { isolation: isolate; }
.msnode .mshex { width: 100%; height: 100%; object-fit: contain; }
.msnode .mst { display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; color: #fff; margin-top: -1cqw; }
.msnode .mst b { font-size: 6.6cqw; line-height: 1; }
.msnode .mst span { font-size: 3cqw; padding: calc(var(--kfix) * 2em) 2.6cqw 0; height: 5.4cqw; display: flex; align-items: center; border: 0 solid transparent; border-image: url(art/sk_capsule.png?v=8b68e5fd96) 22 fill / 1.8cqw stretch; }
.msnode .msok { width: 11cqw !important; height: 11cqw !important; align-self: end; justify-self: end; margin: 0 5cqw 6cqw 0; }
.msnode.on { transform: scale(1); filter: none; } .msnode.on .msglow { opacity: .4; }
.msnode.got .mshex { filter: saturate(.4) brightness(.85); }
.msrew { width: 88cqw; margin-top: 4cqw; padding: 3.4cqw 3cqw 4cqw; display: flex; flex-direction: column; align-items: center; gap: 2.6cqw; border: 0 solid transparent; border-image: url(art/sk_panel.png?v=8b68e5fd96) 26 fill / 3.4cqw stretch; }
.msrew .msrt { font-size: 4.4cqw; color: #fff; }
.msrew .msgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.6cqw; min-height: 17cqw; }
.mscond { margin-top: 4cqw; min-height: 5cqw; font-size: 3.6cqw; color: #ffd84a; }
.msclaim { --h: 14cqw; width: 50cqw; font-size: 6cqw; margin-top: 2cqw; }
.msbot { position: absolute; left: 0; right: 0; bottom: 0; height: 17cqw; display: flex; align-items: center; padding: 0 3cqw calc(env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(10,8,30,.85) 35%); }
.msback { width: 14cqw; height: 14cqw; padding: 0; border: 0; background: none; } .msback img { width: 100%; height: 100%; object-fit: contain; }

/* guide hand */
.ghand { position: absolute; width: 0; height: 0; z-index: 2; }
.ghand .gring { position: absolute; width: 20cqw; height: 20cqw; left: -10cqw; top: -10cqw; animation: gring 1.2s ease-out infinite; }
.ghand .gfinger { position: absolute; width: 11cqw; left: -3.4cqw; top: -17cqw; animation: gpoke .9s ease-in-out infinite; filter: drop-shadow(0 0.8cqw 0 rgba(0,0,0,.35)); }
@keyframes gring { from { transform: scale(.45); opacity: .95; } to { transform: scale(1.1); opacity: 0; } }
@keyframes gpoke { 50% { transform: translateY(3cqw); } }
.gskip { position: absolute; z-index: 75; right: 2cqw; top: 58%; height: 7cqw; padding: calc(var(--kfix) * 2em) 3cqw 0; font-size: 3cqw; color: #fff; border: 0 solid transparent; border-image: url(art/sk_capsule.png?v=8b68e5fd96) 22 fill / 1.8cqw stretch; background: none; }

/* result screen reveal (BattleResultViewMainModule order, h3 921-924 s) + account EXP bar */
.rv { animation: rvin .3s ease-out both; }
@keyframes rvin { from { opacity: 0; transform: translateY(3cqw) scale(.9); } }
.rvdrop { animation: rvdrop .4s cubic-bezier(.3,1.4,.6,1) both; }
@keyframes rvdrop { from { opacity: 0; transform: translate(-50%, -14cqw); } to { opacity: 1; transform: translate(-50%, 0); } }
.rvcell { animation: rvcell .1s ease-out both; }
@keyframes rvcell { from { opacity: 0; transform: scale(0); } 70% { transform: scale(1.18); } }
.rvrec { animation: rvrec .1s ease-out both; }
@keyframes rvrec { from { opacity: 0; transform: scale(1.5); } }
.rexp { display: flex; align-items: center; gap: 2cqw; margin: 1.6cqw 0; font-size: 3.4cqw; }
.rexp .bar { flex: 1; height: 3.2cqw; border-radius: 1.6cqw; background: #120d2b; overflow: hidden; border: 0.4cqw solid #120d2b; }
.rexp .bar i { display: block; height: 100%; width: 0; background: linear-gradient(#7ff0ff, #2fb8e8); border-radius: 1.2cqw; }