/* shop sub-tabs + offer cards, crate opening stage, rates popup, forge screen + merge result, gear presentations (src/shopui.js).
   Frames are generated art (sk_* 9-slice, cr_* / fg_* / sh_* / fx_* sprites from art-src/shopforge.png); no CSS-drawn boxes. */
.tile .stb { position: absolute; right: 0.6cqw; top: 0.2cqw; font-size: 3cqw; line-height: 1; color: #ffe46b; z-index: 2; }

/* ---------- shop tab: one scroll list, Chest / Pack / Recharge tabs jump to their section ---------- */
.shop3 { min-height: 0; scroll-behavior: auto; }
.shsec { display: flex; flex-direction: column; gap: 3cqw; }
.shsec + .shsec { margin-top: 2cqw; }
.shpad { flex: none; height: 4cqw; }
.crate2 .cimg { max-height: 32cqw; }
.cinfo { position: absolute; right: 2.4cqw; top: 2.2cqw; width: 7.6cqw; height: 7.6cqw; padding: 0; border: 0; background: none; z-index: 2; }
.cinfo img { width: 100%; height: 100%; object-fit: contain; }
.shgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6cqw 2.2cqw; }
.shc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; padding: 4.2cqw 1.6cqw 2.2cqw; color: #3a2c18;
  border: 0 solid transparent; border-image: url(art/sk_cream.png?v=8b68e5fd96) 24 fill / 3cqw stretch; }
.shc.sold { filter: saturate(.4) brightness(.85); }
.shn { font-size: 3.8cqw; line-height: 1.1; text-align: center; min-height: 4.2cqw; }
.shi { width: 70%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 0.8cqw 0 rgba(0,0,0,.2)); }
.shx { display: flex; gap: 1.6cqw; font-size: 3cqw; } .shx span { display: inline-flex; align-items: center; gap: 0.4cqw; } .shx img.ic { width: 4.2cqw; height: 4.2cqw; }
.shl { font-size: 2.6cqw; opacity: .8; }
.shc .btn { width: 100%; min-width: 0; font-size: 3cqw; }
.shb { position: absolute; top: -1.8cqw; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 2.6cqw; padding: calc(var(--kfix) * 2em) 2.4cqw 0; height: 5cqw; display: flex; align-items: center;
  border: 0 solid transparent; border-image: url(art/sk_btn_red.png?v=8b68e5fd96) 20 fill / 1.6cqw stretch; z-index: 2; }
.shoptabs { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; padding: 1.2cqw 1.6cqw; background: rgba(10,8,30,.6); }
.stab { position: relative; height: 9cqw; padding: calc(var(--kfix) * 2em) 0 0; font-size: 3.6cqw; color: #fff; background: none;
  border: 0 solid transparent; border-image: url(art/sk_tab.png?v=8b68e5fd96) 24 fill / 2.4cqw stretch; }
.stab.on { border-image-source: url(art/sk_tab_on.png?v=8b68e5fd96); }

/* ---------- rates popup ---------- */
.pop.rates { width: 80cqw; }
.rt-rows { display: flex; flex-direction: column; gap: 1.6cqw; }
.rt-row { display: flex; align-items: center; justify-content: space-between; padding: 1.4cqw 2.4cqw; border: 0 solid transparent; border-image: url(art/sk_cream.png?v=8b68e5fd96) 24 fill / 2.4cqw stretch; color: #3a2c18; font-size: 4cqw; }
.rt-row .gq { min-width: 16cqw; justify-content: center; }
.rt-p { font-size: 3.2cqw; } .rt-p.rt-note { opacity: .65; font-size: 2.8cqw; }

/* ---------- crate opening stage (ShowBoxRewardViewModule, shop_ace_crate_draw.png) ---------- */
.crs { justify-content: flex-start; padding: 0; background: #120d2b url(art/bg_menu.jpg?v=8b68e5fd96) center / cover no-repeat; overflow: hidden; }
.crs::before { content: ""; position: absolute; inset: 0; background: rgba(8,6,24,.45); }
.crs > * { position: relative; }
.crs-lamp { position: absolute; top: -2cqw; left: 50%; width: 34cqw; transform: translateX(-50%); opacity: .95; pointer-events: none; }
.crs-top { margin-top: 30cqw; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3cqw; min-height: 50cqw; }
.crs-title { font-size: 6cqw; }
.crs-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 3.6cqw 2.6cqw; width: 92%; }
.crs-cell { width: 24cqw; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; }
.crs.ten .crs-cell { width: 15.4cqw; }
.crs-cell .tile { width: 100%; }
.crs-q { font-size: 2.6cqw; color: #fff; padding: calc(var(--kfix) * 2em) 2cqw 0; height: 4cqw; display: inline-flex; align-items: center; border-radius: 2cqw; text-shadow: 0 0.3cqw 0 rgba(0,0,0,.35); }
.crs.ten .crs-q { font-size: 2.2cqw; }
.crs-stage { position: absolute !important; left: 0; right: 0; bottom: 32cqw; height: 60cqw; pointer-events: none; }
.crs-ped { position: absolute; left: 50%; bottom: 0; width: 86cqw; transform: translateX(-50%); }
.crs-box { position: absolute; left: 50%; bottom: 12cqw; width: 40cqw; margin-left: -20cqw; transform-origin: 50% 90%; }
.crs-rays { position: absolute; left: 50%; bottom: 0; width: 110cqw; margin-left: -55cqw; opacity: 0; mix-blend-mode: screen; }
.crs-ring { position: absolute; left: 50%; bottom: 10cqw; width: 50cqw; margin-left: -25cqw; opacity: 0; }
.crs-skip { position: absolute !important; right: 4cqw; bottom: 30cqw; display: flex; align-items: center; gap: 1.4cqw; padding: 0; border: 0; background: none; color: #fff; font-size: 3.2cqw; z-index: 2; }
.crs-skip img { width: 5.4cqw; height: 5.4cqw; object-fit: contain; }
.crs-btns { position: absolute !important; left: 8cqw; right: 8cqw; width: auto; bottom: 14cqw; }
.crs-btns .btn.two { --h: 12cqw; }
.crs-jump { position: absolute !important; right: 4cqw; top: 22cqw; z-index: 2; }
.crs .tapclose { position: absolute !important; bottom: 5cqw; left: 0; right: 0; margin: 0; }

/* ---------- forge (UIEquipMergeViewModule, forge.png / forge_select.png) ---------- */
.fgv { justify-content: flex-start; padding: 0; background: #120d2b; }
.fg-top { position: relative; flex: none; height: 84cqw; width: 100%; background: url(art/bg_menu.jpg?v=8b68e5fd96) center 30% / cover no-repeat; overflow: hidden; }
.fg-title { position: absolute; left: 4cqw; top: 13cqw; font-size: 5.6cqw; }
.fg-tree { position: absolute; left: 5cqw; top: 24cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 1.4cqw; }
.fg-slot { position: relative; width: 17cqw; aspect-ratio: 1; display: grid; place-items: center; }
.fg-slot .tile { width: 100%; }
.fg-plus { width: 100%; height: 100%; object-fit: contain; }
.fg-target { width: 21cqw; margin-left: 1cqw; }
.fg-target.on .tile { filter: drop-shadow(0 0 2.4cqw #7ff3ff); }
.fg-up { width: 7cqw; transform: rotate(-90deg); margin-left: 8cqw; }
.fg-row { display: flex; align-items: center; gap: 1.2cqw; }
.fg-mat { width: 14.5cqw; }
.fg-plusic { width: 5cqw; }
.tile.ghost > img { opacity: .3; filter: grayscale(.6); } .tile.ghost .lvb, .tile.ghost .stb { display: none; } .tile.ghost .q { opacity: .25; }
.fg-bubble { position: absolute; right: 3cqw; top: 15cqw; width: 58cqw; min-height: 20cqw; padding: 3cqw 4cqw 5.4cqw; font-size: 3.2cqw; line-height: 1.35; color: #fff; text-align: center;
  display: flex; flex-direction: column; justify-content: center; border: 0 solid transparent; border-image: url(art/fg_bubble.png?v=8b68e5fd96) 40 60 70 60 fill / 4cqw 5cqw 6cqw 5cqw stretch; }
.fg-pv { display: flex; align-items: center; justify-content: center; gap: 1.6cqw; font-size: 3.6cqw; } .fg-pv img.ic { width: 4.4cqw; height: 4.4cqw; } .fg-pv em { color: #8dff7a; font-style: normal; }
.fg-pv2 { font-size: 3cqw; color: #ffe46b; }
.fg-smith { position: absolute; right: -6cqw; bottom: -1cqw; width: 46cqw; pointer-events: none; }
.fg-tree { z-index: 2; }
.fg-need { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6cqw 0 1.2cqw; text-align: center; font-size: 3.4cqw; color: #fff; background: rgba(8,6,24,.6); }
.fg-bar { flex: none; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.8cqw 3cqw; background: rgba(28,24,72,.95); border-top: 0.5cqw solid #3d3480; }
.fg-bar b { font-size: 4.6cqw; } .fg-bar .btn { width: 28cqw; }
.fg-inv { flex: 1; width: 100%; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(5, 1fr); align-content: start; align-items: start; grid-auto-rows: max-content; gap: 3cqw 2cqw; padding: 3cqw; background: rgba(10,8,30,.75); }
.fg-it { position: relative; } .fg-it .tile { width: 100%; }
.fg-it.fg-off { filter: brightness(.6) saturate(.55); }
.fg-eq { position: absolute; left: 0; right: 0; top: 42%; text-align: center; font-size: 2.5cqw; color: #fff; background: rgba(10,8,30,.7); padding: calc(var(--kfix) * 2em) 0 0.2cqw; pointer-events: none; }
.fg-ck { position: absolute; left: 50%; top: 50%; width: 9cqw; margin: -4.5cqw 0 0 -4.5cqw; pointer-events: none; }
.fg-empty { grid-column: 1 / -1; text-align: center; opacity: .7; padding-top: 6cqw; }
.fg-foot { flex: none; width: 100%; display: flex; align-items: center; gap: 6cqw; padding: 2.4cqw 4cqw calc(3cqw + env(safe-area-inset-bottom)); background: linear-gradient(#1a1438, #0d0a20); }
.fg-back { width: 15cqw; height: 15cqw; padding: 0; border: 0; background: none; } .fg-back img { width: 100%; height: 100%; object-fit: contain; }
.fg-foot .btn { width: 46cqw; }

/* merge animation + result (MergeAnimationViewModule, UIEquipMergeResultViewModule / forge_result.png) */
.mga { justify-content: center; padding: 0; background: rgba(8,6,24,.82); }
.mga > img { position: absolute; left: 50%; top: 50%; }
.mga-rays { width: 120cqw; margin: -60cqw 0 0 -60cqw; }
.mga-anvil { width: 52cqw; margin: -26cqw 0 0 -26cqw; }
.mga-ring { width: 60cqw; margin: -30cqw 0 0 -30cqw; opacity: 0; }
.mres { justify-content: center; padding: 0; background: rgba(8,6,24,.88) url(art/bg_menu.jpg?v=8b68e5fd96) center / cover no-repeat; background-blend-mode: multiply; }
.mres-in { width: 90cqw; display: flex; flex-direction: column; align-items: center; gap: 2.6cqw; }
.mres-in .ribbon-t { width: 80%; }
.mres-tile { width: 24cqw; margin-top: 4cqw; } .mres-tile .tile { width: 100%; }
.mres-name { font-size: 5.4cqw; }
.mres-row { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1cqw; }
.mres-k { font-size: 4.4cqw; color: #ffe46b; margin-top: 2cqw; }
.mres-v { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8cqw; font-size: 4.8cqw; padding: 1.6cqw 0; background: linear-gradient(90deg, transparent, rgba(60,120,220,.45), transparent); }
.mres-v b { color: #8dff7a; font-weight: 400; } .mres-v img.ic { width: 6cqw; height: 6cqw; }
.mres-new { font-size: 4.4cqw; color: #ffe46b; margin-top: 3cqw; } .mres-line { font-size: 3.8cqw; }
.mres .tapclose { position: absolute; bottom: 8cqw; left: 0; right: 0; opacity: .7; }

/* gear detail: level-up burst over the icon, quick upgrade result */
.gicon { position: relative; }
.upfx { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.upfx img { position: absolute; left: 0; top: 0; }
.upfx-r { width: 50cqw; margin: -25cqw 0 0 -25cqw; opacity: 0; }
.upfx-o { width: 30cqw; margin: -15cqw 0 0 -15cqw; opacity: 0; }
.pop.qres { width: 76cqw; }
.qres-t { width: 22cqw; align-self: center; } .qres-t .tile { width: 100%; }
.pop.qres .mres-v { font-size: 4.2cqw; background: none; gap: 4cqw; }
.qres-c { font-size: 3.4cqw; display: flex; align-items: center; justify-content: center; gap: 1cqw; } .qres-c img.ic { width: 4.6cqw; height: 4.6cqw; }