/* ============================================================================================================
   UI skin: the original draws every frame (buttons, capsules, ribbons, panels, slots, nav tiles) from sprites,
   so we do the same with 9-slice border-images cut from art-src/skin.png (tools/cut-art.py skin).
   Text that sits inside a frame uses .tl, which is shifted by --kfix: the Korean display font's ink is not
   centred in its line box, measured at start-up in main.js (fontBoundingBox vs actualBoundingBox).
   ============================================================================================================ */
:root { --kfix: 0.06; --ui-font: "Jua", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
.tl, .btn, .tab, .ribbon-t, .pophead b, .capsule b, .chip b, .sk-badge { font-family: var(--ui-font); font-weight: 400; }
/* white text with a dark outline, like the original labels */
.ol { color: #fff; text-shadow: -0.3cqw 0 #1a1438, 0.3cqw 0 #1a1438, 0 -0.3cqw #1a1438, 0 0.3cqw #1a1438, 0 0.6cqw #1a1438; }

/* ---- buttons: three fixed heights, one width rule per row (grid), icon/text gap fixed ---- */
.btn { --h: 11cqw; height: var(--h); min-width: calc(var(--h) * 2.2); padding: calc(var(--kfix) * 2em) calc(var(--h) * 0.42) 0; display: inline-flex; align-items: center; justify-content: center; gap: 1cqw;
  border: 0 solid transparent; border-image: url(art/sk_btn_yellow.png?v=84d36ffe02) 26 fill / calc(var(--h) * 0.25) stretch; background: none !important; box-shadow: none !important; border-radius: 0;
  font-size: calc(var(--h) * 0.42); line-height: 1; color: #fff; text-shadow: -0.25cqw 0 #6b3a00, 0.25cqw 0 #6b3a00, 0 -0.25cqw #6b3a00, 0 0.35cqw #6b3a00; white-space: nowrap; }
.btn small { font-size: 0.7em; }
.btn.blue { border-image-source: url(art/sk_btn_blue.png?v=84d36ffe02); text-shadow: -0.25cqw 0 #0d3a7a, 0.25cqw 0 #0d3a7a, 0 -0.25cqw #0d3a7a, 0 0.35cqw #0d3a7a; }
.btn.green { border-image-source: url(art/sk_btn_green.png?v=84d36ffe02); text-shadow: -0.25cqw 0 #1f5a10, 0.25cqw 0 #1f5a10, 0 -0.25cqw #1f5a10, 0 0.35cqw #1f5a10; }
.btn.red { border-image-source: url(art/sk_btn_red.png?v=84d36ffe02); text-shadow: -0.25cqw 0 #7a1024, 0.25cqw 0 #7a1024, 0 -0.25cqw #7a1024, 0 0.35cqw #7a1024; }
.btn.purple { border-image-source: url(art/sk_btn_purple.png?v=84d36ffe02); text-shadow: -0.25cqw 0 #3d1580, 0.25cqw 0 #3d1580, 0 -0.25cqw #3d1580, 0 0.35cqw #3d1580; }
.btn:disabled, .btn.off { border-image-source: url(art/sk_btn_gray.png?v=84d36ffe02) !important; filter: none; text-shadow: -0.25cqw 0 #3a3a44, 0.25cqw 0 #3a3a44, 0 -0.25cqw #3a3a44, 0 0.35cqw #3a3a44; }
.btn.small { --h: 8.4cqw; font-size: calc(var(--h) * 0.4); padding: calc(var(--kfix) * 2em) calc(var(--h) * 0.4) 0; }
.btn.big, .btn.start { --h: 15cqw; }
.btn.two { flex-direction: column; gap: 0.4cqw; line-height: 1.05; } .btn.two small { font-size: 0.62em; }
.btn img.ic { width: 1.1em !important; height: 1.1em !important; vertical-align: 0; }
.btn:active { transform: translateY(0.4cqw); }
.btnrow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2.4cqw; width: 100%; } .btnrow .btn { width: 100%; min-width: 0; }

/* ---- currency capsules (top bar): icon overlaps the left end, + badge under the icon ---- */
.capsules { display: flex; gap: 2.6cqw; margin-left: auto; padding-left: 2cqw; }
.capsule { position: relative; height: 6.4cqw; min-width: 19cqw; display: flex; align-items: center; justify-content: flex-end; padding: calc(var(--kfix) * 2em) 1.8cqw 0 5.6cqw;
  border: 0 solid transparent; border-image: url(art/sk_capsule.png?v=84d36ffe02) 22 fill / 1.8cqw stretch; cursor: pointer; }
.capsule > img.ic { position: absolute; left: -2.2cqw; top: 50%; transform: translateY(-50%); width: 7.4cqw !important; height: 7.4cqw !important; }
.capsule > img.ic.plus { left: -1.2cqw; top: auto; bottom: -1.4cqw; transform: none; width: 3.6cqw !important; height: 3.6cqw !important; }
.capsule b { font-size: 3.4cqw; line-height: 1; color: #fff; }
.capsule small { position: absolute; left: 0; right: 0; top: 100%; text-align: center; font-size: 2.2cqw; opacity: .8; }

/* ---- top bar: profile on the campaign tab, "i + screen name" on the others ---- */
.topbar { display: flex; align-items: center; gap: 0; padding: 2.6cqw 3cqw 0; min-height: 15cqw; position: relative; z-index: 2; }
.prof2 { display: flex; align-items: center; gap: 2cqw; padding: 1cqw 3cqw 1cqw 1cqw; border-radius: 2cqw; background: linear-gradient(90deg, rgba(10,8,30,0.85), rgba(10,8,30,0.25)); }
.prof2 .av { position: relative; width: 12cqw; height: 12cqw; }
.prof2 .av > img { width: 100%; height: 100%; object-fit: cover; border-radius: 1.6cqw; border: 0.5cqw solid #1a1438; background: #ffd27a; }
.prof2 .av .lvr { position: absolute; left: 50%; bottom: -1.6cqw; transform: translateX(-50%); padding: calc(var(--kfix) * 2em) 1.6cqw 0; height: 4.2cqw; display: flex; align-items: center; font-size: 2.6cqw; color: #fff;
  border: 0 solid transparent; border-image: url(art/sk_btn_purple.png?v=84d36ffe02) 26 fill / 1.1cqw stretch; white-space: nowrap; }
.prof2 .nm { font-size: 3cqw; } .prof2 .xp2 { display: flex; gap: 0.4cqw; margin: 0.8cqw 0; } .prof2 .xp2 i { width: 2.6cqw; height: 1.8cqw; background: #1a1438; border-radius: 0.4cqw; transform: skewX(-12deg); }
.prof2 .xp2 i.on { background: linear-gradient(#7ff0ff, #2fb8e8); }
.prof2 .pw { font-size: 2.8cqw; color: #ffd84a; display: flex; align-items: center; gap: 0.8cqw; }
.scrtitle { display: flex; align-items: center; gap: 1.6cqw; font-size: 5.2cqw; padding-top: calc(var(--kfix) * 2em); }
.scrtitle img.ic { width: 6cqw !important; height: 6cqw !important; vertical-align: 0; }

/* ---- section ribbon (shop "장비 보급함" / "골드", talent title) ---- */
.ribbon-t { align-self: center; width: 78%; height: 10.4cqw; display: flex; align-items: center; justify-content: center; padding-top: calc(var(--kfix) * 2em);
  border: 0 solid transparent; border-image: url(art/sk_ribbon.png?v=84d36ffe02) 40 fill / 50% 5cqw stretch; font-size: 4.6cqw; }

/* ---- bottom nav: 5 tiles, the selected one twice as wide with ◀ name ▶, the others icon only ---- */
.tabs { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 0; padding: 1.2cqw 1.2cqw calc(1.2cqw + env(safe-area-inset-bottom)); background: linear-gradient(#1a1438, #0d0a20); border-top: 0.5cqw solid #2c2560; }
.tabs .tab { position: relative; height: 18cqw; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6cqw; color: #fff; font-size: 3.2cqw; line-height: 1;
  border: 0 solid transparent; border-image: url(art/sk_tab.png?v=84d36ffe02) 24 fill / 2.4cqw stretch; background: none !important; border-radius: 0; }
.tabs .tab img { width: 11cqw; height: 11cqw; object-fit: contain; }
.tabs .tab.on { grid-column: span 2; border-image-source: url(art/sk_tab_on.png?v=84d36ffe02); }
.tabs .tab.on img { width: 13cqw; height: 13cqw; margin-top: -4cqw; filter: drop-shadow(0 0.8cqw 0 rgba(0,0,0,0.35)); }
.tabs .tab.on .tn { display: flex; align-items: center; gap: 1.6cqw; padding-top: calc(var(--kfix) * 2em); font-size: 3.6cqw; }
.tabs .tab.on .tn i { font-style: normal; font-size: 2.4cqw; opacity: .8; }
.tabs .tab .tn { display: none; }
.tabs .tab.locked img.ic { width: 7cqw !important; height: 7cqw !important; opacity: .9; }
.tabs .tab:not(.on) { width: auto; }

/* ---- popups: header ribbon + navy 9-slice body; header-less variant for item detail ---- */
.pop { background: none; border: 0 solid transparent; border-image: url(art/sk_panel.png?v=84d36ffe02) 26 fill / 3.4cqw stretch; box-shadow: none; overflow: visible; }
.pophead { background: none; border: 0 solid transparent; border-image: url(art/sk_header.png?v=84d36ffe02) 40 fill / 50% 5cqw stretch; margin: -1.2cqw -1.2cqw 0; height: 12cqw; display: flex; align-items: center; justify-content: center; padding: calc(var(--kfix) * 2em) 12cqw 0; }
.pophead b { font-size: 5.2cqw; text-shadow: -0.3cqw 0 #2b1680, 0.3cqw 0 #2b1680, 0 -0.3cqw #2b1680, 0 0.4cqw #2b1680; }
.popx { width: 9.4cqw; height: 9.4cqw; right: 1.6cqw; }
.popbody { padding: 3.4cqw 4cqw 4cqw; gap: 2.6cqw; }

/* ---- item slots / tiles ---- */
.tile { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 0 solid transparent; border-image: url(art/sk_slot.png?v=84d36ffe02) 24 fill / 2.4cqw stretch; background: none; }
.tile > img { width: 74%; height: 74%; object-fit: contain; }
.tile .q { position: absolute; inset: 1.6cqw; border-radius: 1cqw; opacity: .55; }
.tile .lvb { position: absolute; left: 50%; bottom: -1cqw; transform: translateX(-50%); font-size: 2.5cqw; padding: calc(var(--kfix) * 2em) 1.4cqw 0; height: 3.8cqw; display: flex; align-items: center; background: #1a1438; border-radius: 1.2cqw; white-space: nowrap; }
.tile.gold { border-image-source: url(art/sk_slot_gold.png?v=84d36ffe02); }
.tile.empty > img { opacity: .25; }

.lobby { display: flex; flex-direction: column; }

/* ---- campaign (original: title ~29%, boss 35–57%, goal 66%, start row 75–84%, nav 88%+) ---- */
.camp { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; }
.iconbtn { position: absolute; left: 3cqw; top: 1cqw; width: 17cqw; display: flex; flex-direction: column; align-items: center; gap: 0.6cqw; background: none; border: 0; padding: 0; color: #fff; }
.iconbtn img { width: 13cqw; height: 13cqw; object-fit: contain; animation: bob 1.8s ease-in-out infinite; filter: drop-shadow(0 0.6cqw 0 rgba(0,0,0,.35)); }
.iconbtn span { font-size: 2.8cqw; line-height: 1.05; text-align: center; }
.ctitle { margin-top: 16cqw; font-size: 7.4cqw; line-height: 1; }
.cbest { margin-top: 2cqw; font-size: 4cqw; color: #ffd84a; text-shadow: 0 0.4cqw 0 #1a1438; line-height: 1; }
.cboss { position: relative; width: 100%; height: 50cqw; margin-top: 3cqw; display: grid; place-items: center; }
.cboss > img { height: 100%; max-width: 62cqw; object-fit: contain; filter: drop-shadow(0 2cqw 0 rgba(0,0,0,0.3)); animation: bob 2.4s ease-in-out infinite; } .cboss > img.lock { filter: grayscale(1) brightness(.5); }
.cboss .arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 0; } .cboss .arrow.l { left: 4cqw; } .cboss .arrow.r { right: 4cqw; }
.goal { position: relative; margin-top: auto; width: 50cqw; height: 10cqw; display: flex; align-items: center; justify-content: center; gap: 1.4cqw; padding: calc(var(--kfix) * 2em) 3cqw 0; color: #fff; font-size: 3.4cqw;
  border: 0 solid transparent; border-image: url(art/sk_dayhead.png?v=84d36ffe02) 24 fill / 2.4cqw stretch; background: none; }
.goal img { width: 8cqw; height: 8cqw; margin-top: -3cqw; object-fit: contain; }
.startrow { display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center; gap: 2cqw; width: 100%; padding: 3.4cqw 4cqw 3cqw; }
.startrow .btn.start { width: 100%; --h: 17cqw; font-size: 7cqw; }
.side { position: relative; height: 15cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4cqw; color: #fff; padding: 0;
  border: 0 solid transparent; border-image: url(art/sk_tab.png?v=84d36ffe02) 24 fill / 2.4cqw stretch; background: none; }
.side > img:first-child { width: 9cqw; height: 9cqw; object-fit: contain; filter: grayscale(.6) brightness(.8); }
.side img.lk { position: absolute; top: 1.4cqw; right: 1.6cqw; width: 4.4cqw !important; height: 4.4cqw !important; }
.side span { font-size: 3cqw; line-height: 1; }

/* ---- shop (original: one wide crate card per row, aspect ≈ 1.84, two buttons side by side; gold row in a grid) ---- */
.panel { padding: 2cqw 4cqw 3cqw; gap: 3cqw; }
.crate2 { position: relative; display: grid; grid-template-columns: 1fr 42%; grid-template-rows: 1fr auto; gap: 1.6cqw 2cqw; padding: 3cqw 3.4cqw 3.4cqw; min-height: 50cqw;
  border: 0 solid transparent; border-image: url(art/sk_panel.png?v=84d36ffe02) 26 fill / 3.4cqw stretch; }
.crate2::before { content: ""; position: absolute; inset: 1.6cqw; border-radius: 2cqw; z-index: -1; }
.crate2.premium::before { background: radial-gradient(circle at 70% 40%, #b98cff, #5b2fc9 70%); } .crate2.standard::before { background: radial-gradient(circle at 70% 40%, #ffe08a, #e08a1c 70%); }
.crate2 { isolation: isolate; }
.ctext { display: flex; flex-direction: column; gap: 1.2cqw; } .ctext .cn { font-size: 5cqw; line-height: 1; } .ctext .cg { font-size: 2.9cqw; line-height: 1.3; font-weight: 800; text-shadow: 0 0.3cqw 0 rgba(0,0,0,.5); } .ctext .cf { font-size: 2.6cqw; opacity: .9; }
.cimg { width: 100%; max-height: 30cqw; object-fit: contain; align-self: center; filter: drop-shadow(0 1.4cqw 0 rgba(0,0,0,.35)); }
.crate2 .btnrow { grid-column: 1 / -1; }
.goldgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; }
.gcard { display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; padding: 2.4cqw 1cqw 2cqw; border: 0 solid transparent; border-image: url(art/sk_slot_gold.png?v=84d36ffe02) 24 fill / 2.4cqw stretch; }
.gcard b { font-size: 3.8cqw; line-height: 1; } .gcard img { width: 13cqw; height: 11cqw; object-fit: contain; } .gcard .btn { width: 100%; min-width: 0; padding-left: 0; padding-right: 0; }
.skip { font-size: 2.8cqw; opacity: .7; align-self: center; }

/* ---- hangar (original: slots around the plane, stat capsules + Fighter button under it, action bar, 6-col inventory) ---- */
.hangar { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.gearstage { display: grid; grid-template-columns: 19cqw 1fr 19cqw; gap: 2cqw; padding: 2cqw 4cqw 3cqw; }
.gcol2 { display: flex; flex-direction: column; gap: 4cqw; justify-content: center; }
.gmid { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2.4cqw; background: radial-gradient(ellipse at 50% 70%, rgba(80,200,255,.35), transparent 60%); }
.gplane2 { width: 44cqw; filter: drop-shadow(0 2cqw 0 rgba(0,0,0,.3)); }
.stats { display: flex; gap: 2cqw; }
.stat { display: flex; align-items: center; gap: 1cqw; height: 6cqw; padding: calc(var(--kfix) * 2em) 2.4cqw 0 1.4cqw; font-size: 3.4cqw; border: 0 solid transparent; border-image: url(art/sk_capsule.png?v=84d36ffe02) 22 fill / 1.8cqw stretch; }
.gbtns { display: flex; gap: 4cqw; }
.rbtn { display: flex; flex-direction: column; align-items: center; gap: 0.6cqw; background: none; border: 0; padding: 0; color: #fff; }
.rbtn img { width: 12cqw; height: 12cqw; padding: 1.6cqw; object-fit: contain; border-radius: 50%; background: radial-gradient(circle, #fff, #9fd8ff); border: 0.6cqw solid #1a1438; }
.rbtn span { font-size: 2.8cqw; line-height: 1; }
.actbar { display: flex; align-items: center; justify-content: space-between; padding: 1.6cqw 4cqw; background: linear-gradient(#2c2560, #1f1a48); border-top: 0.4cqw solid #3d3480; border-bottom: 0.4cqw solid #120d2b; }
.actbar .btn { width: 30cqw; } .actbar span { font-size: 3.6cqw; }
.inv2 { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(6, 1fr); align-content: start; gap: 3cqw 1.8cqw; padding: 3cqw 3cqw 4cqw; background: rgba(10,8,30,.55); }
.inv2 .empty { grid-column: 1 / -1; text-align: center; opacity: .7; font-size: 3.2cqw; padding-top: 6cqw; }

/* ---- research (original: 4 cols, card ≈ 21% wide, aspect .74, col gap 3.5%, row gap ≈ .12 × card; two draw buttons at the bottom) ---- */
.panel.research { gap: 3cqw; }
.research .tgrid { grid-template-columns: repeat(4, 21cqw); justify-content: space-between; row-gap: 3.4cqw; padding: 0 0.6cqw; }
.research .tcard { aspect-ratio: .74; width: 21cqw; }
.research .tcard .nm { font-size: 2.6cqw; } .research .tcard b { font-size: 2.6cqw; }
.draws2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; padding: 2.4cqw 4cqw 2.4cqw; background: linear-gradient(transparent, rgba(10,8,30,.7) 30%); }
.dcol { display: flex; flex-direction: column; align-items: center; gap: 1.4cqw; } .dcap { font-size: 2.9cqw; line-height: 1.1; text-align: center; min-height: 3.4cqw; display: flex; align-items: center; gap: 0.8cqw; }
.dcol .btn { width: 100%; }

/* ---- plane popup rows ---- */
.prow { display: grid; grid-template-columns: 15cqw 1fr auto; align-items: center; gap: 3cqw; padding: 1.6cqw; border-radius: 2cqw; background: rgba(255,255,255,.06); }
.prow.sel { box-shadow: inset 0 0 0 0.6cqw #ffd84a; } .pinfo { display: flex; flex-direction: column; gap: 1cqw; text-align: left; } .pinfo b { font-size: 4cqw; } .pinfo span { font-size: 2.9cqw; opacity: .85; }
.prow .btn { min-width: 24cqw; }

/* ---- gear detail (original: header-less, light header + cream body + cost row + 3 equal buttons) ---- */
.gdet { width: 92cqw; display: flex; flex-direction: column; gap: 2.6cqw; padding: 2.4cqw 3.4cqw 4cqw; border: 0 solid transparent; border-image: url(art/sk_panel.png?v=84d36ffe02) 26 fill / 3.4cqw stretch; }
.ghead { position: relative; display: grid; grid-template-columns: 22cqw 1fr; gap: 3.4cqw; align-items: start; padding: 2.4cqw; border-radius: 2cqw; background: linear-gradient(#cfe0ff, #9db8f5); color: #1a1438; }
.gicon { display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; } .gicon .tile { width: 100%; }
.glv { font-size: 2.8cqw; padding: calc(var(--kfix) * 2em) 2cqw 0; height: 4.6cqw; display: flex; align-items: center; color: #fff; background: #2b2563; border-radius: 1.2cqw; }
.ginfo { display: flex; flex-direction: column; align-items: flex-start; gap: 1.6cqw; padding-top: 1cqw; padding-right: 9cqw; }
.gname { font-size: 4.8cqw; line-height: 1.05; } .gq { font-size: 2.8cqw; color: #fff; padding: calc(var(--kfix) * 2em) 3cqw 0; height: 4.6cqw; display: inline-flex; align-items: center; border-radius: 2.4cqw; text-shadow: 0 0.3cqw 0 rgba(0,0,0,.35); }
.gline { font-size: 3cqw; font-weight: 800; opacity: .8; line-height: 1.3; }
.ghead .popx { position: absolute; right: 1.6cqw; top: 1.6cqw; transform: none; }
.gbody { display: flex; flex-direction: column; gap: 2cqw; padding: 3.4cqw; color: #3a2c18; border: 0 solid transparent; border-image: url(art/sk_cream.png?v=84d36ffe02) 24 fill / 3cqw stretch; }
.gstat { display: flex; align-items: center; gap: 1.4cqw; font-size: 3.8cqw; padding: calc(var(--kfix) * 2em) 2.4cqw 0; height: 8cqw; background: rgba(120,90,40,.12); border-radius: 1.4cqw; }
.gstat em { font-style: normal; color: #2fa83c; }
.gtabl { align-self: flex-start; font-size: 3.4cqw; padding: calc(var(--kfix) * 2em) 4cqw 0 2.4cqw; height: 6cqw; display: flex; align-items: center; background: linear-gradient(90deg, rgba(120,90,40,.28), rgba(120,90,40,0)); border-radius: 1cqw; }
.gskills { display: flex; flex-direction: column; gap: 0.6cqw; }
.gsk { display: flex; align-items: flex-start; gap: 2cqw; padding: 1.6cqw 2cqw; border-radius: 1.2cqw; font-size: 3.1cqw; font-weight: 800; line-height: 1.3; color: #9a8a70; }
.gsk:nth-child(odd) { background: rgba(120,90,40,.08); } .gsk.on { color: #3a2c18; }
.gsk .lkc { flex: none; width: 4.6cqw; height: 4.6cqw; border-radius: 1cqw; display: grid; place-items: center; margin-top: -0.2cqw; } .gsk .lkc img.ic { width: 3.4cqw !important; height: 3.4cqw !important; vertical-align: 0; }
.gsk:not(.on) .lkc { opacity: .55; }
.gcost { display: flex; justify-content: center; gap: 6cqw; font-size: 3.6cqw; } .gcost span { display: flex; align-items: center; gap: 1cqw; } .gcost .lack { color: #ff6b81; }
.gbtns3 .btn { --h: 12.4cqw; font-size: 4.4cqw; } .gbtns3 .btn.two { font-size: 3.6cqw; }
/* fit pass: 6 grid columns so the selected tile (span 2) + 4 tiles stay on one row; narrower profile + capsules */
.tabs { grid-template-columns: repeat(6, 1fr); }
.prof2 { gap: 1.6cqw; padding: 0.8cqw 2cqw 0.8cqw 0.8cqw; } .prof2 .av { width: 10.4cqw; height: 10.4cqw; } .prof2 .nm { font-size: 2.7cqw; } .prof2 .xp2 i { width: 1.9cqw; height: 1.5cqw; } .prof2 .pw { font-size: 2.6cqw; }
.capsules { gap: 3.4cqw; } .capsule { min-width: 0; width: 17cqw; height: 6cqw; padding-left: 4.8cqw; padding-right: 1.6cqw; } .capsule b { font-size: 3.1cqw; }
.capsule > img.ic { left: -2cqw; width: 6.8cqw !important; height: 6.8cqw !important; }
.cboss .arrow img.ic { width: 10cqw !important; height: 10cqw !important; }
/* pause: aligned with the wave ribbon row (canvas y 18–54 of 960) */
.hud-btn { left: 3cqw; top: 2.6cqw; width: 10.4cqw; height: 10.4cqw; }
/* pause menu: one button size */
.pause .btn { width: 100%; --h: 11cqw; font-size: 4.4cqw; }
/* energy purchase cards (original: tall cards with an inset picture, count, note, wide button) */
.ebox { padding: 2cqw 2cqw 3cqw; gap: 1.6cqw; border: 0 solid transparent; border-image: url(art/sk_cream.png?v=84d36ffe02) 24 fill / 3cqw stretch; color: #3a2c18; background: none; }
.ebox .epic { width: 100%; aspect-ratio: 1 / 1.05; display: grid; place-items: center; border-radius: 1.6cqw; background: radial-gradient(circle, #e9f3ff, #c3d6f2); }
.ebox .epic img.ic { width: 60% !important; height: 60% !important; }
.ebox b { font-size: 6cqw; } .ebox .d { font-size: 3cqw; font-weight: 800; color: #6b5a40; min-height: 7cqw; display: flex; align-items: center; text-align: center; line-height: 1.2; }
.ebox .btn { width: 92%; }
/* starter day headers on the blue ribbon frame */
.spday .dh { background: none; border: 0 solid transparent; border-image: url(art/sk_dayhead.png?v=84d36ffe02) 24 fill / 2.4cqw stretch; height: 6.8cqw; display: flex; align-items: center; justify-content: center; padding-top: calc(var(--kfix) * 2em); font-family: var(--ui-font); font-weight: 400; }
.tile .lvb { font-size: 2.7cqw; }
/* one reward chip look everywhere (reward popup, result screen, starter pack): slot frame, icon, count bottom-right */
.rwi, .result .loot > div, .spc { position: relative; display: grid; place-items: center; background: none !important; border: 0 solid transparent; border-image: url(art/sk_slot.png?v=84d36ffe02) 24 fill / 2.4cqw stretch; border-radius: 0; box-shadow: none; }
.rwi { width: 17cqw; height: 17cqw; } .result .loot > div { width: 15cqw; height: 15cqw; } .spc { width: 11.6cqw; height: 11.6cqw; }
.rwi > img, .result .loot > div > img, .spc > img:first-child { width: 72%; height: 72%; object-fit: contain; }
.rwi > b, .result .loot > div > span, .spc > b { position: absolute; right: 1cqw; bottom: 0.6cqw; font-family: var(--ui-font); font-weight: 400; color: #fff; font-size: 2.9cqw; line-height: 1;
  text-shadow: -0.25cqw 0 #1a1438, 0.25cqw 0 #1a1438, 0 -0.25cqw #1a1438, 0 0.3cqw #1a1438; }
.spc > b { font-size: 2.4cqw; }
.pause { background: none; border: 0 solid transparent; border-image: url(art/sk_panel.png?v=84d36ffe02) 26 fill / 3.4cqw stretch; padding: 5cqw 6cqw 6cqw; }
.pause h3 { font-family: var(--ui-font); font-weight: 400; font-size: 6cqw; }
.result { background: none; border: 0 solid transparent; border-image: url(art/sk_panel.png?v=84d36ffe02) 26 fill / 3.4cqw stretch; }

/* ===== pass 2 (user review): flattened 9-slice frames, square-ish buttons, trapezoid titles, backgrounds ===== */
.btn.two { height: calc(var(--h) * 1.3); }
.crate2 .btnrow .btn.two { --h: 11cqw; }
.tile .lvb { background: none; left: auto; right: 1.6cqw; bottom: 1cqw; transform: none; padding: 0; height: auto; font-size: 2.8cqw; color: #fff;
  text-shadow: -0.25cqw 0 #1a1438, 0.25cqw 0 #1a1438, 0 -0.25cqw #1a1438, 0 0.3cqw #1a1438; }
.lobby { background: #120d2b url(art/bg_menu.jpg?v=84d36ffe02) center / cover no-repeat; } .lobby::before { display: none; }
.lobby.tab-campaign { background-image: url(art/bg_lobby.jpg?v=84d36ffe02); }
.research .tgrid { padding-top: 2cqw; } .research .tcard.back img { filter: drop-shadow(0 1.2cqw 0 rgba(0,0,0,.35)); }
.research .tcard { animation: float 3s ease-in-out infinite; } .research .tcard:nth-child(2n) { animation-delay: -1.5s; }
@keyframes float { 50% { transform: translateY(-0.8cqw); } }
/* bottom nav like the original: name on a dark plate at the bottom of the selected tile, small triangles on its edges */
.tabs .tab.on { justify-content: flex-end; padding-bottom: 1.4cqw; overflow: visible; }
.tabs .tab.on img { position: absolute; top: -5cqw; left: 50%; transform: translateX(-50%); width: 16cqw; height: 16cqw; margin: 0; }
.tabs .tab.on .tn { gap: 0; padding: calc(var(--kfix) * 2em) 3cqw 0; height: 5.4cqw; background: rgba(10,8,30,.75); border-radius: 1cqw; font-size: 3.4cqw; }
.tabs .tab.on .tn i { display: none; }
.tabs .tab.on::before, .tabs .tab.on::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); border: 1.8cqw solid transparent; }
.tabs .tab.on::before { left: -2.6cqw; border-right-color: #ffd84a; } .tabs .tab.on::after { right: -2.6cqw; border-left-color: #ffd84a; }
.tabs { overflow: visible; }
.gbtns { gap: 3.4cqw; } .rbtn.lock img { filter: grayscale(1) brightness(.7); } .rbtn { position: relative; } .rbtn img.ic.lk { position: absolute; right: -0.6cqw; top: -0.6cqw; width: 4.6cqw !important; height: 4.6cqw !important; }

/* ===== pass 3 (GPT review round 1) ===== */
/* full-height phones: the app grows from 9:16 up to ~9:19.5 so the nav sits on the bottom edge like the original;
   the battle canvas stays 9:16 and is centred (input uses relative drags, so nothing else changes) */
#app { width: min(100vw, 56.25dvh); height: min(100dvh, 216.7vw); background: #0d0a20; }
#cv { top: 50%; bottom: auto; height: auto; aspect-ratio: 540 / 960; transform: translateY(-50%); }
.hud-btn { top: calc((100cqh - 177.78cqw) / 2 + 2.6cqw); }
/* lobby: wider profile, title block lower, smaller boss, taller goal button with the icon over its top edge */
.topbar .prof2 { flex: 0 0 40%; } .topbar .capsules { flex: 1; justify-content: space-between; gap: 2.6cqw; padding-left: 3.4cqw; } .topbar .capsule { flex: 1; width: auto; }
.ctitle { margin-top: 22cqw; } .cboss { height: 44cqw; margin-top: 4cqw; } .cboss > img { max-width: 50cqw; }
.goal { height: 13cqw; width: 54cqw; padding: calc(var(--kfix) * 2em) 4cqw 0; } .goal img { width: 11cqw; height: 11cqw; margin-top: -6cqw; }
/* hangar: two buttons only on the action bar, inventory shows empty slot frames, pilot button not greyed */
.actbar { justify-content: space-between; } .actbar .btn { width: 27cqw; }
.inv2 .tile.blank { pointer-events: none; opacity: .55; }
.rbtn.lock img { filter: none; }
.gmid { padding-top: 6cqw; }
/* gear detail: cream body runs down to the cost row; all three buttons one height; wider Lv badge */
.gbody2 { display: flex; flex-direction: column; gap: 2.6cqw; padding: 3.4cqw; color: #3a2c18; border: 0 solid transparent; border-image: url(art/sk_cream.png?v=84d36ffe02) 24 fill / 3cqw stretch; }
.gbody2 .gbody { border: 0; padding: 0; }
.gbtns3 .btn, .gbtns3 .btn.two { height: var(--h); font-size: 4cqw; } .gbtns3 .btn.two { flex-direction: row; gap: 0.6cqw; }
.glv { width: 100%; justify-content: center; } .gline { font-weight: 700; opacity: .85; }
/* shop: 3-column gold grid, roomier crate text */
.goldgrid { grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; } .crate2 { padding: 4cqw 4.4cqw 4cqw; } .ctext .cg { line-height: 1.25; }
/* research: grid uses the full width with tighter rows, wider title, buttons narrower with a wider gap */
.research .ribbon-t { width: 86%; } .research .tgrid { row-gap: 2.4cqw; padding: 1cqw 0 0; } .panel.research { padding-left: 2.6cqw; padding-right: 2.6cqw; }
.draws2 { padding: 2.4cqw 8cqw 2.4cqw; column-gap: 7cqw; }
.gbody2 .gcost { color: #3a2c18; } .gbody2 .gcost .lack { color: #d8344f; }
.topbar .prof2 { flex: 0 0 34%; min-width: 0; overflow: hidden; } .topbar .capsules { gap: 3.2cqw; padding-left: 3.6cqw; } .topbar .capsule { padding-left: 4.2cqw; } .topbar .capsule b { font-size: 2.9cqw; }
.topbar .capsule > img.ic { width: 6cqw !important; height: 6cqw !important; left: -2.4cqw; }

/* ===== pass 4 (user review 2 + GPT nav review) ===== */
/* text sits in the flat band of every frame: the measured highlight (top 19%) and lip (bottom 20%) are padding */
.btn { padding-top: calc(var(--h) * 0.19 + var(--kfix) * 2em); padding-bottom: calc(var(--h) * 0.2); }
.btn.two { height: calc(var(--h) * 1.45); padding-top: calc(var(--h) * 0.24 + var(--kfix) * 2em); padding-bottom: calc(var(--h) * 0.26); }
/* bottom nav (original): flat dark tiles butted together with thin black separators; selected = dark patterned tile with
   a square yellow frame, icon raised ~13% of a tile, name as outlined text (no plate), white outlined arrows inside the ends */
.tabs { gap: 0; padding: 0 0 env(safe-area-inset-bottom); background: #0a0a14; border-top: 0.6cqw solid #0a0a14; }
.tabs .tab { border: 0 !important; border-image: none !important; background: linear-gradient(#2a2d48, #1c1e33) !important; border-right: 0.6cqw solid #0a0a14 !important; height: 17cqw; }
.tabs .tab.on { background: repeating-linear-gradient(135deg, #2d2a52 0 1.4cqw, #262347 1.4cqw 2.8cqw) !important; box-shadow: inset 0 0 0 0.9cqw #ffc928; border-radius: 0.6cqw; }
.tabs .tab.on img { top: -2.2cqw; width: 14cqw; height: 14cqw; }
.tabs .tab.on .tn { background: none; padding: calc(var(--kfix) * 2em) 0 0; height: auto; margin-bottom: 1.2cqw; font-size: 3.6cqw; }
.tabs .tab.on::before, .tabs .tab.on::after { display: none; }
.tabs .ar { position: absolute; top: 50%; width: 3.8cqw; height: 4cqw; transform: translateY(-50%); background: #fff; filter: drop-shadow(0.3cqw 0 0 #0a0a14) drop-shadow(-0.3cqw 0 0 #0a0a14) drop-shadow(0 0.3cqw 0 #0a0a14) drop-shadow(0 -0.3cqw 0 #0a0a14); }
.tabs .ar.l { left: 1.4cqw; clip-path: polygon(100% 0, 0 50%, 100% 100%); } .tabs .ar.r { right: 1.4cqw; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tabs .tab:not(.on) img { width: 10cqw; height: 10cqw; }
/* item tiles: art with breathing room inside the frame */
.tile > img { width: 60%; height: 60%; } .tile .q { inset: 2.2cqw; opacity: .45; }
/* round Weapon/Fighter/Pilot buttons: art clipped inside a circle with padding */
.rbtn .rc { position: relative; display: grid; place-items: center; width: 12.4cqw; height: 12.4cqw; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff, #a9dcff); border: 0.6cqw solid #1a1438; box-shadow: 0 0.6cqw 0 rgba(0,0,0,.35); }
.rbtn .rc img { width: 72%; height: 72%; padding: 0; border: 0; border-radius: 0; background: none; object-fit: contain; }
.rbtn { gap: 1cqw; } .rbtn span { font-size: 3cqw; }
/* stat capsules: centred in the capsule's flat band, more room */
.stat { height: 7.2cqw; gap: 1.4cqw; padding: calc(7.2cqw * 0.27 + var(--kfix) * 2em) 3.2cqw calc(7.2cqw * 0.21) 2.2cqw; font-size: 3.4cqw; line-height: 1; }
.stat img.ic { width: 4.4cqw !important; height: 4.4cqw !important; vertical-align: 0; }
/* currency capsules: + badge at the icon's bottom-right, number with breathing room, text in the flat band */
.topbar .capsule { height: 6.8cqw; padding: calc(6.8cqw * 0.27 + var(--kfix) * 2em) 2.4cqw calc(6.8cqw * 0.21) 5cqw; justify-content: center; }
.topbar .capsule > img.ic { left: -2.2cqw; width: 6.4cqw !important; height: 6.4cqw !important; }
.topbar .capsule > img.ic.plus { left: 2.2cqw; bottom: -1.2cqw; top: auto; transform: none; width: 3.4cqw !important; height: 3.4cqw !important; }
.topbar .capsule b { font-size: 3cqw; letter-spacing: 0.05em; }
.topbar .capsules { gap: 4cqw; padding-left: 4cqw; }

/* ===== pass 5: reference-guided pieces (art-src/nav.png, cut by tools/cut-nav.py) — one asset per role ===== */
/* bottom nav: flat slate tiles butted with black seams; selected = dark halftone tile with a thin yellow frame,
   gray outlined arrowheads sitting ON its left/right frame, name as plain outlined text under the raised icon */
.tabs .tab { border: 0 solid transparent !important; border-image: url(art/nv_tile.png?v=84d36ffe02) 20% fill / 1.6cqw stretch !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
.tabs .tab.on { border-image: url(art/nv_sel.png?v=84d36ffe02) 16% fill / 1.6cqw stretch !important; }
.tabs .ar { width: 4.4cqw; height: 5.4cqw; background: url(art/nv_arrow.png?v=84d36ffe02) center / contain no-repeat; clip-path: none; filter: none; }
.tabs .ar.l { left: -1.4cqw; } .tabs .ar.r { right: -1.4cqw; transform: translateY(-50%) scaleX(-1); }
.tabs .tab.on { z-index: 1; }
/* section title: full-width band (not a ribbon / trapezoid), dots on the left — the same component on every screen */
.ribbon-t { width: auto !important; align-self: stretch; margin: 0 -4cqw; height: 9.6cqw; border: 0 !important; border-image: none !important;
  background: url(art/nv_band.png?v=84d36ffe02) left center / 100% 100% no-repeat; font-size: 4.8cqw; padding-top: calc(var(--kfix) * 2em); }
.research .ribbon-t, .shop .ribbon-t { width: auto !important; margin: 0 -4cqw; }
/* crate card: chamfered frame tinted per crate; buttons inset from the card edges with a cost strip in their lower half */
.crate2 { border: 0 solid transparent; border-image: url(art/nv_card.png?v=84d36ffe02) 22% fill / 5cqw stretch; padding: 4.4cqw 5cqw 5cqw; }
.crate2::before { inset: 1.2cqw; border-radius: 0; clip-path: polygon(4.4cqw 0, 100% 0, 100% 100%, 0 100%, 0 4.4cqw); }
.crate2 .btnrow { padding: 0 2cqw; gap: 4cqw; }
.crate2 .btn.two { --h: 10cqw; height: 13cqw; padding: calc(13cqw * 0.12 + var(--kfix) * 2em) 1.6cqw calc(13cqw * 0.14); gap: 0.6cqw; justify-content: space-between; }
.crate2 .btn.two small { width: 100%; height: 5cqw; display: flex; align-items: center; justify-content: center; gap: 0.8cqw; font-size: 3.2cqw;
  border: 0 solid transparent; border-image: url(art/nv_cost.png?v=84d36ffe02) 30% fill / 1.4cqw stretch; padding-top: calc(var(--kfix) * 2em); }

/* ===== pass 6: one asset per role (docs/UI_COMPONENTS.md) + one spacing scale ===== */
:root { --sp1: 1cqw; --sp2: 2cqw; --sp3: 3cqw; --sp4: 4cqw; --sp5: 6cqw; }
/* lobby side actions (patrol / events): their own angled buttons */
.side { border: 0 !important; border-image: none !important; background: url(art/lb_side_blue.png?v=84d36ffe02) center / 100% 100% no-repeat !important; height: 16cqw; padding: 1.4cqw 0 2.6cqw; }
.side.green { background-image: url(art/lb_side_green.png?v=84d36ffe02) !important; }
.side > img:first-child { filter: none; width: 8cqw; height: 8cqw; }
/* goal button */
.goal { border-image: url(art/lb_goal.png?v=84d36ffe02) 30% fill / 3cqw stretch; height: 12cqw; }
/* profile panel with its avatar socket; level tag */
.prof2 { background: url(art/lb_prof.png?v=84d36ffe02) left center / 100% 100% no-repeat; border-radius: 0; padding: 1.4cqw 3cqw 1.4cqw 1.6cqw; }
.prof2 .av > img { border: 0; border-radius: 0.8cqw; }
.prof2 .av .lvr { border: 0 !important; border-image: none !important; background: url(art/lb_lvtag.png?v=84d36ffe02) center / 100% 100% no-repeat; height: 4.4cqw; padding: calc(var(--kfix) * 2em) 2cqw 0; }
/* gear slots + inventory tiles: the slate gear-slot frame (reward chips keep their own chip frame) */
.tile { border-image: url(art/lb_slot.png?v=84d36ffe02) 22% fill / 2.6cqw stretch; }
.tile.gold { border-image: url(art/sk_slot_gold.png?v=84d36ffe02) 24 fill / 2.6cqw stretch; }
/* stat pills */
.stat { border: 0 !important; border-image: none !important; background: url(art/lb_stat.png?v=84d36ffe02) center / 100% 100% no-repeat; padding: calc(var(--kfix) * 2em) 3.2cqw 0 2.4cqw; }
/* gear detail: periwinkle header panel + cream body panel */
.ghead { background: none; border: 0 solid transparent; border-image: url(art/lb_dethead.png?v=84d36ffe02) 26% fill / 3cqw stretch; border-radius: 0; padding: var(--sp4); }
.gbody2 { border-image: url(art/lb_cream.png?v=84d36ffe02) 18% fill / 3cqw stretch; padding: var(--sp4); gap: var(--sp3); }
.gdet { gap: var(--sp3); padding: var(--sp3) var(--sp3) var(--sp4); }
.ghead .popx { right: var(--sp2); top: var(--sp2); }
/* spacing scale: same gap from top bar to content, between sections, inside panels on every screen */
.topbar { padding: var(--sp3) var(--sp4) 0; min-height: 0; }
.panel { padding: var(--sp4) var(--sp4) var(--sp4); gap: var(--sp4); }
.panel > .ribbon-t:first-child { margin-top: 0; }
.crate2 + .crate2 { margin-top: 0; }
.hangar .gearstage { padding: var(--sp4) var(--sp4) var(--sp3); }
.actbar { padding: var(--sp2) var(--sp4); } .inv2 { padding: var(--sp4); gap: var(--sp3) var(--sp2); }
/* the band bleeds exactly to the screen edges on every screen: it reads the panel's own side padding */
.panel { --pp: var(--sp4); padding-left: var(--pp); padding-right: var(--pp); }
.panel.research { --pp: 2.6cqw; }
.ribbon-t, .research .ribbon-t, .shop .ribbon-t { margin: 0 calc(var(--pp) * -1) !important; }
.panel > .ribbon-t:first-child { margin-top: calc(var(--sp4) * -1) !important; }
/* selected nav name fully inside the tile */
.tabs .tab.on .tn { margin-bottom: 2.2cqw; font-size: 3.3cqw; } .tabs .tab { height: 18cqw; }
/* original section bands are ~80% of the screen, centred (measured on shop_1 / research_talent_grid) */
.ribbon-t, .research .ribbon-t, .shop .ribbon-t { margin: 0 auto !important; width: 80% !important; align-self: center; height: 8.6cqw; }
.panel > .ribbon-t:first-child { margin-top: 0 !important; }
.tabs .ar { width: 3.6cqw; height: 4.4cqw; opacity: .9; }
.tile .lvb { right: 2.8cqw; bottom: 2.2cqw; font-size: 2.6cqw; } .rbtn img.ic.lk { width: 5cqw !important; height: 5cqw !important; right: -1cqw; top: -1cqw; } .prof2 .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18cqw; }
.panel > * { flex-shrink: 0; } .ribbon-t { flex: none; }

/* ===== pass 7 (user review 3) ===== */
/* goal reward sits right under the boss art */
.goal { margin-top: 2cqw; } .startrow { margin-top: auto; }
/* notification badge like the original: red rounded square with a white "!", slightly tilted, white rim */
/* selected nav tile: full-height side frames, arrows fully visible above the neighbours */
.tabs { overflow: visible; } .tabs .tab.on { z-index: 3; border-image-width: 1.8cqw !important; }
.tabs .ar { width: 4cqw; height: 5cqw; z-index: 4; } .tabs .ar.l { left: -2cqw; } .tabs .ar.r { right: -2cqw; }
/* profile: wide enough for avatar + name + exp bar + power without clipping */
.topbar .prof2 { flex: 0 0 41%; padding: 1.2cqw 2.4cqw 1.6cqw 1.4cqw; gap: 1.8cqw; overflow: visible; }
.prof2 .nm { max-width: none; font-size: 2.8cqw; } .prof2 .xp2 i { width: 2cqw; } .prof2 > div:last-child { min-width: 0; }
.topbar .capsules { gap: 3.4cqw; padding-left: 3.4cqw; } .topbar .capsule b { font-size: 2.8cqw; letter-spacing: 0.02em; }
/* section band: the dotted left part keeps its natural aspect, only the flat part stretches; one height everywhere */
.ribbon-t, .research .ribbon-t, .shop .ribbon-t { height: 9cqw !important; background: none !important; border: 0 solid transparent !important;
  border-image: url(art/nv_band.png?v=84d36ffe02) 0 8% 0 32% fill / 0 2cqw 0 24cqw stretch !important; }
/* crate buttons: tall enough that label + cost strip sit between the top highlight (19%) and bottom lip (20%) */
.crate2 .btn.two { --h: 16cqw; height: 16cqw; padding: calc(16cqw * 0.19 + var(--kfix) * 2em) 2.2cqw calc(16cqw * 0.2); justify-content: center; gap: 0.8cqw; font-size: 4cqw; }
.crate2 .btn.two small { height: 4.8cqw; width: 88%; border-image: url(art/nv_cost.png?v=84d36ffe02) 30% fill / 2.4cqw stretch; }
/* gold cards: inset button with breathing room, text in the flat band */
.gcard { padding: 2.6cqw 2.6cqw 3cqw; } .gcard .btn { width: 86%; --h: 9cqw; height: 9cqw; padding: calc(9cqw * 0.19 + var(--kfix) * 2em) 1cqw calc(9cqw * 0.2); font-size: 3.4cqw; }
.tabs .ar.l, .tabs .ar.r { clip-path: none !important; }

/* ===== pass 8: flat frames (art-src/flat.png). Every frame has a 9px outline in its sprite; slice = corner size and
   width = slice × (0.6cqw / 9px) so the on-screen outline is the same 0.6cqw on EVERY component and every side.
   Highlights exist on buttons only. Patterns are separate layers, never stretched. ===== */
/* section band */
.ribbon-t, .research .ribbon-t, .shop .ribbon-t { border-image: url(art/fl_band.png?v=84d36ffe02) 16 fill / 1.07cqw stretch !important; position: relative; overflow: hidden; }
.ribbon-t::before { content: ""; position: absolute; left: 1.2cqw; top: 1cqw; bottom: 1cqw; width: 22cqw; background: url(art/fl_dots.png?v=84d36ffe02) left center / auto 100% no-repeat; opacity: .28; pointer-events: none; }
/* nav */
.tabs .tab { border-image: url(art/fl_tile.png?v=84d36ffe02) 16 fill / 1.07cqw stretch !important; }
.tabs .tab.on { border-image: url(art/fl_sel.png?v=84d36ffe02) 24 fill / 1.6cqw stretch !important;
  background: radial-gradient(circle, rgba(255,255,255,.10) 0 0.55cqw, transparent 0.6cqw) 0 0 / 2.4cqw 2.4cqw !important; background-origin: padding-box !important; }
.tabs .ar { width: 3.4cqw; height: 4cqw; background: url(art/fl_arrow.png?v=84d36ffe02) center / contain no-repeat; top: 50%; z-index: 4; }
.tabs .ar.l { left: 1.2cqw; } .tabs .ar.r { right: 1.2cqw; }
/* selected icon has a fixed box ABOVE the name so tall icons never cover the text */
.tabs .tab.on img { top: -3.6cqw; height: 14cqw; width: 18cqw; object-fit: contain; object-position: center bottom; }
.tabs .tab.on .tn { position: absolute; left: 0; right: 0; bottom: 1.6cqw; margin: 0; justify-content: center; height: 4.4cqw; }
/* notification badge sprite */
/* cost strip, crate card, gold card, gear detail panels: flat */
.crate2 .btn.two small { border-image: url(art/fl_cost.png?v=84d36ffe02) 40 fill / 2.4cqw stretch; }
.crate2 { border-image: url(art/fl_card.png?v=84d36ffe02) 40 fill / 2.67cqw stretch; }
.crate2::before { inset: 0.6cqw; clip-path: polygon(3.2cqw 0, 100% 0, 100% 100%, 0 100%, 0 3.2cqw); }
.gcard { border-image: url(art/fl_gcard.png?v=84d36ffe02) 24 fill / 1.6cqw stretch; }
.ghead { border-image: url(art/fl_head.png?v=84d36ffe02) 24 fill / 1.6cqw stretch; padding: var(--sp4) 12cqw var(--sp4) var(--sp4); }
.gbody2 { border-image: url(art/fl_cream.png?v=84d36ffe02) 24 fill / 1.6cqw stretch; }
.ghead .popx { top: var(--sp3); right: var(--sp3); }
/* talent card front uses the same frame family as the back */
.research .tcard:not(.back) { background: none !important; border: 0 solid transparent; border-image: url(art/fl_cardfront.png?v=84d36ffe02) 30 fill / 2cqw stretch; border-radius: 0; justify-content: center; gap: 0.6cqw; padding: 2cqw 1cqw; }
.research .tcard:not(.back) img { width: 72%; height: 50%; } .research .tcard:not(.back) b { position: static; }
/* lobby background: darken toward the bottom so the start row and nav read clearly */
.lobby.tab-campaign::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10,8,30,.35), rgba(10,8,30,0) 18%, rgba(10,8,30,0) 50%, rgba(10,8,30,.75) 78%, rgba(10,8,30,.92)); pointer-events: none; z-index: 0; }
.lobby > * { position: relative; z-index: 1; }
/* starter pack: clear of the profile, inside the side margin */
.iconbtn { left: var(--sp4); top: var(--sp4); }
/* profile: avatar sits in the panel's socket, Lv tag above it in z, one exp gauge */
.topbar .prof2 { height: 14cqw; flex: 0 0 44%; padding: 1.8cqw 2.4cqw 1.8cqw 1.8cqw; align-items: center; }
.prof2 .av { width: 10.4cqw; height: 10.4cqw; flex: none; z-index: 1; } .prof2 .av > img { object-fit: contain; background: #ffd27a; }
.prof2 .av .lvr { z-index: 2; bottom: -2cqw; }
.xpbar { width: 20cqw; height: 1.8cqw; margin: 0.8cqw 0; border-radius: 0.5cqw; background: #0d0a20; box-shadow: inset 0 0 0 0.3cqw #000; overflow: hidden; position: relative; }
.xpbar i { display: block; height: 100%; background: linear-gradient(#8ff2ff, #2fb8e8); }
.xpbar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 2.2cqw, rgba(0,0,0,.6) 2.2cqw 2.5cqw); }
/* currency capsules: fixed width (never grows with the title), number right-aligned; + under each icon's own right edge */
.topbar .capsules { flex: none; margin-left: auto; gap: 3cqw; padding-left: 2cqw; justify-content: flex-end; }
.topbar .capsule { flex: none; width: 15.5cqw; justify-content: flex-end; padding-right: 2cqw; }
.topbar .capsule b { font-variant-numeric: tabular-nums; }
#energy > img.ic.plus { left: 1.2cqw; } #goldc > img.ic.plus, #gemc > img.ic.plus { left: 2cqw; }
/* boss + goal as one group: goal right under the art, smaller */
.bossgrp { display: flex; flex-direction: column; align-items: center; gap: var(--sp2); margin-top: var(--sp3); width: 100%; }
.cboss { height: 40cqw; margin-top: 0; } .cboss > img { max-height: 100%; }
.goal { margin-top: 0; width: 46cqw; height: 10.4cqw; font-size: 3.2cqw; } .goal img { width: 9cqw; height: 9cqw; margin-top: -4cqw; }

/* badge size wins over every container img rule */
img.dot { width: 5cqw !important; height: 5cqw !important; position: absolute !important; right: -1cqw; top: -1.2cqw; left: auto !important; bottom: auto !important; margin: 0 !important; transform: none !important; animation: none !important; filter: none !important; object-fit: contain; z-index: 5; }
.tabs .tab img.dot { right: 0.4cqw; top: 0.4cqw; }
.goal img.dot { right: -1.4cqw; top: -1.4cqw; }
.lobby > .tabs { position: relative; }
.cboss > img { height: 40cqw !important; width: auto; max-width: 56cqw; } .cboss { overflow: visible; } .bossgrp { gap: var(--sp3); }
/* cost strip: corner pieces must not meet in the middle (that seam drew a line through the text) */
.crate2 .btn.two small { height: 5.2cqw; border-image-width: 1.8cqw; }
/* profile panel: avatar socket (left 38%) and diagonal trim (right 30%) keep their own proportions; only the middle stretches */
.topbar .prof2 { background: none !important; border: 0 solid transparent; border-image: url(art/lb_prof.png?v=84d36ffe02) 0 30% 0 38% fill / 0 11.4cqw 0 14cqw stretch; height: 14cqw; padding: 1.8cqw 3cqw 1.8cqw 1.8cqw; }
.crate2 .btn.two small { border-image: url(art/fl_cost.png?v=84d36ffe02) 0 40 fill / 0 2.6cqw stretch !important; height: 5.2cqw; }
/* battle fills the screen height: the world height follows the app's aspect (main.js), so the canvas covers #app */
#cv { top: 0; bottom: 0; height: 100%; aspect-ratio: auto; transform: none; }
.hud-btn { top: 2.6cqw; }

/* ===== pass 9 (user review 5) ===== */
/* + badge: same height on all three, tucked under each icon's own visible right edge (bolt and gem are narrower) */
.topbar .capsule > img.ic.plus { bottom: -0.7cqw !important; }
#energy > img.ic.plus { left: 0.8cqw !important; } #goldc > img.ic.plus { left: 1.6cqw !important; } #gemc > img.ic.plus { left: 0.8cqw !important; }
/* profile: complete panel (art-src/lobby2.png); socket + rim keep their size, flat middle stretches */
.topbar .prof2 { border-image: url(art/lb_prof2.png?v=84d36ffe02) 0 8% 0 30% fill / 0 3.8cqw 0 14cqw stretch !important; padding: 0 3cqw 0 2.2cqw; height: 14cqw; }
.prof2 .av { width: 10cqw; height: 10cqw; } .prof2 .av > img { background: none; border-radius: 0.6cqw; }
/* boss bigger, the chapter triangles sit right beside it, goal reward lower with breathing room */
.bossgrp { gap: var(--sp5); margin-top: var(--sp3); }
.cboss { width: auto; height: 54cqw; display: block; position: relative; }
.cboss > img { height: 54cqw !important; max-width: 66cqw; display: block; margin: 0 auto; }
.cboss .arrow { top: 50%; transform: translateY(-50%); } .cboss .arrow img { width: 7.6cqw; height: 10cqw; object-fit: contain; display: block; }
.cboss .arrow.r { right: -9cqw; left: auto; } .cboss .arrow.l { left: -9cqw; right: auto; } .cboss .arrow.l img { transform: scaleX(-1); }
/* start row: start uses the same button family as patrol/events, sizes balanced */
.startrow { grid-template-columns: 1fr 1.35fr 1fr; align-items: end; padding: var(--sp3) var(--sp4) var(--sp4); gap: var(--sp3); }
.side { height: 14cqw; }
.startrow .btn.start { border: 0 !important; border-image: none !important; background: url(art/lb_start.png?v=84d36ffe02) center / 100% 100% no-repeat !important; --h: 16cqw; height: 16cqw;
  padding: 1.6cqw 0 3.6cqw; font-size: 6cqw; text-shadow: -0.3cqw 0 #6b3a00, 0.3cqw 0 #6b3a00, 0 -0.3cqw #6b3a00, 0 0.4cqw #6b3a00; }
.startrow .btn.start small { font-size: 3.4cqw; }

/* ===== pass 10: fixed positions, not content-sized ===== */
/* profile: avatar clipped INSIDE the measured socket of lb_prof2 (socket inner box at 3.6/2.9cqw, 8cqw square
   for a 14cqw-tall panel); Lv tag centred under the socket; text starts after the socket */
.topbar .prof2 { position: relative; padding: 0 3cqw 0 14.4cqw !important; }
.prof2 .av { position: absolute; left: 3.6cqw; top: 2.9cqw; width: 8cqw !important; height: 8cqw !important; overflow: hidden; border-radius: 0.6cqw; z-index: 0; }
.prof2 .av > img { width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; background: #ffd27a; }
.prof2 > .lvr { position: absolute; left: 7.6cqw; bottom: -0.8cqw; transform: translateX(-50%); z-index: 2; height: 4.4cqw; padding: calc(var(--kfix) * 2em) 2cqw 0; display: flex; align-items: center; font-size: 2.6cqw; color: #fff;
  background: url(art/lb_lvtag.png?v=84d36ffe02) center / 100% 100% no-repeat; white-space: nowrap; }
/* campaign: fixed stage box; title, arrows and goal are placed from the box, never from the boss art size */
.camp { display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; }
.ctitle { margin-top: 26cqw; font-size: 8.4cqw; }
.cbest { margin-top: 2.4cqw; font-size: 4.4cqw; }
.bossgrp { margin-top: 4cqw; gap: 0; display: grid; grid-template-rows: 62cqw 18cqw; justify-items: center; width: 100%; }
.cboss { position: relative; width: 66cqw; height: 62cqw; display: grid; place-items: center; }
.cboss > img { width: 100%; height: 100% !important; max-width: none; object-fit: contain; margin: 0; }
.cboss .arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 8cqw; height: 10.6cqw; padding: 0; background: none; border: 0; }
.cboss .arrow img { width: 100% !important; height: 100% !important; object-fit: contain; }
.cboss .arrow.r { right: -14cqw; left: auto; } .cboss .arrow.l { left: -14cqw; right: auto; }
.goal { align-self: end; width: 48cqw; height: 10.4cqw; margin: 0; }
/* start: the art's own aspect (420×165), label in the flat face above the base lip, never overflowing */
.startrow .btn.start { width: 100%; height: auto !important; aspect-ratio: 420 / 165; min-height: 0; padding: 0 0 4.2% !important; flex-direction: column; justify-content: center; gap: 0.2cqw; overflow: hidden; font-size: 5.2cqw !important; line-height: 1; }
.startrow .btn.start small { font-size: 3cqw !important; line-height: 1; }
.startrow { align-items: center; }
.bossgrp .cboss > img { width: 66cqw !important; height: 62cqw !important; max-height: 62cqw !important; object-fit: contain; }

/* ===== pass 11 (user review 6) ===== */
/* crate keeps its own tint while it opens (the open state used to replace the filter) */
.opening .cr { filter: var(--tint); } .opening.open .cr { filter: var(--tint) brightness(1.6) drop-shadow(0 0 4cqw var(--c)) !important; }
/* nav badge sits on the tile's top-right corner, outside the icon */
.tabs .tab img.dot { right: -0.6cqw !important; top: -1.6cqw !important; width: 4.6cqw !important; height: 4.6cqw !important; }
/* free: green cost strip + glow so it reads at a glance */
.crate2 .btn.two small.free { border-image-source: none !important; background: #2fbf4a; border-radius: 2.6cqw; color: #fff; box-shadow: 0 0 0 0.4cqw #0d0a20, 0 0 2cqw #5dff7a; }
.btn.isfree { border-image-source: url(art/sk_btn_green.png?v=84d36ffe02) !important; box-shadow: none; animation: freeGlow 1.4s ease-in-out infinite; }
@keyframes freeGlow { 50% { filter: drop-shadow(0 0 1.6cqw #6dff8a); } }
/* gear quality colour sits BEHIND the item art */
.tile { isolation: isolate; } .tile .q { z-index: 0; opacity: .5; } .tile > img { position: relative; z-index: 1; } .tile .lvb { z-index: 2; }
/* pilot lock readable */
.rbtn img.ic.lk { width: 6.4cqw !important; height: 6.4cqw !important; right: -1.6cqw; top: -1.6cqw; z-index: 2; }
/* campaign: stage block (title + boss + goal) centred in the space between the top area and the start row */
.camp { display: flex; flex-direction: column; align-items: center; }
.stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 14cqw 0 2cqw; }
.stage .ctitle { margin-top: 0; }
.startrow { margin-top: 0; }
/* top bar: equal outer margin left and right */
.topbar { padding-left: var(--sp4); padding-right: var(--sp4); }
.topbar .capsules { margin-right: 0; }
/* research: draw buttons float over the grid on a transparent fade; the grid scrolls underneath */
.lobby.tab-research .panel.research { padding-bottom: 34cqw; }
.lobby.tab-research .draws2 { position: absolute; left: 0; right: 0; bottom: 18cqw; z-index: 3; background: linear-gradient(rgba(10,8,30,0), rgba(10,8,30,.55) 45%, rgba(10,8,30,.75)); padding-top: 8cqw; }
.lobby.tab-research .draws2 .dcap:empty { display: none; }
/* top bar fits with equal outer margins (measured: was 16px left / 4px right) */
.topbar .prof2 { flex: 0 0 41% !important; }
.topbar .capsules { gap: 2.6cqw !important; padding-left: 2.4cqw !important; }
.topbar .capsule { width: 14.2cqw !important; padding-right: 1.6cqw !important; }
.topbar .capsule b { font-size: 2.7cqw !important; }
/* ===== pass 12 ===== */
img.dot { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.panel { min-height: 0; }
.rbtn .rc img.lockonly { width: 56% !important; height: 56% !important; border: 0; border-radius: 0; background: none; padding: 0; }
.rbtn.lock .rc { background: radial-gradient(circle at 50% 35%, #d9dde8, #8f97ab); }
.lobby.tab-research .draws2 .dcap:empty { display: flex; }
.draws2 .dcol { display: grid; grid-template-rows: 5cqw auto; justify-items: stretch; align-items: end; gap: 1.4cqw; }
.draws2 .dcap { justify-content: center; min-height: 5cqw; }
.lobby.tab-research .draws2 { pointer-events: none; } .lobby.tab-research .draws2 .btn { pointer-events: auto; }
/* research: bottom padding = height of the floating draw bar + one row of breathing room, so the last cards can
   always be scrolled fully above the buttons (measured: bar ≈ 33cqw) */
.lobby.tab-research .panel.research { padding-bottom: 46cqw !important; }
/* the raised icon of the selected tab is drawn above everything (the original lets it overlap the content above) */
.lobby > .tabs { z-index: 6 !important; }
/* top bar: the currency capsules sit at the same height on every tab (they used to centre on the taller profile) */
.topbar { align-items: flex-start !important; }
.topbar .capsules { align-self: flex-start; margin-top: 0.4cqw; }
.topbar .scrtitle { height: 7.2cqw; align-items: center; }
/* research: the draw bar sits above the raised selected-tab icon (icon rises ≈4cqw over the nav) */
.lobby.tab-research .draws2 { bottom: 24cqw !important; padding-bottom: 1cqw; }
.lobby.tab-research .panel.research { padding-bottom: 52cqw !important; }
.panel, .popbody, .inv2 { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
/* ===== research, rebuilt simply: the draw bar is its own row above the nav (not floating), the card grid scrolls
   in the space above it, and one empty card row of space follows the last cards ===== */
.lobby.tab-research .draws2 { position: relative !important; bottom: auto !important; left: auto; right: auto; z-index: 2; flex: none;
  margin-top: -6cqw; padding: 6cqw 8cqw 3cqw !important; pointer-events: none;
  background: linear-gradient(rgba(13,10,32,0), rgba(13,10,32,.85) 6cqw, rgba(13,10,32,.92)) !important; }
.lobby.tab-research .draws2 .btn { pointer-events: auto; }
.lobby.tab-research .panel.research { padding-bottom: 34cqw !important; }
.lobby.tab-research .tabs { margin-top: 0; }
/* "free" = the same red ! badge on the button's top-right corner (no colour change) */
.btn { position: relative; overflow: visible; }
.btn img.dot.btnbadge { right: -1.4cqw !important; top: -1.8cqw !important; width: 4.8cqw !important; height: 4.8cqw !important; }
.btn.isfree { animation: none; }
.lobby.tab-research .draws2 { padding-bottom: 7cqw !important; }