src/styles/store.css

/* ============================================================================
   ARMORY — styling for the tabbed store rebuilt in src/storeui.js.
   #storeList is a flex column (see ui.css) whose children stretch to its
   full width by default, so nothing here needs vw units — every box is
   sized off its own flex/percentage parent, which is what keeps a panel
   this narrow from ever losing its right edge.
   ============================================================================ */

/* ---- header: cores / spent / maxed ---------------------------------------- */
.armStats{display:flex;gap:7px;box-sizing:border-box;margin-bottom:1px;min-width:0;max-width:100%}
.armStat{flex:1;min-width:0;text-align:center;border-radius:10px;padding:7px 4px;
  border:1px solid transparent;background:var(--panelG) padding-box,var(--steelB) border-box;
  box-shadow:0 3px 9px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.09)}
.armStat b{display:block;font-family:var(--fT);font-size:15px;color:#8be8ff;
  font-variant-numeric:tabular-nums;text-shadow:0 0 8px rgba(65,200,255,.35)}
.armStat span{display:block;font-size:9px;letter-spacing:.13em;color:#7fa8c4;
  font-weight:700;margin-top:2px;white-space:nowrap}

/* ---- tabs ------------------------------------------------------------------
   .tabRow/.tabBtn come from ui.css; tabCt is the small per-category maxed
   counter added on top of that shared look. */
.tabCt{opacity:.7;font-size:9px;margin-left:1px}
.armTabWrap{position:sticky;top:0;z-index:6;flex:0 0 auto;min-width:0;max-width:100%;overflow:hidden;
  padding-top:2px;background:linear-gradient(180deg,rgba(3,8,14,.99),rgba(3,8,14,.92) 82%,transparent)}
/* The shared .tabRow is sticky itself. Here the wrapper owns stickiness so it
   keeps a real flex height even when a long inventory list needs to scroll. */
#armTabs{position:static;width:100%;box-sizing:border-box;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;overflow:visible}
#armTabs .tabBtn{flex:none;min-width:0;width:100%;justify-content:center;padding:8px 2px;font-size:8px;letter-spacing:.06em}
#armTabs .tabBtn .tEm{font-size:11px}
.armTabHint{display:none}
#storeList{padding-bottom:calc(var(--sab) + 28px)}
.armTabHint{text-align:right;margin:-3px 3px 2px;font-family:var(--fT);font-size:9px;
  letter-spacing:.12em;color:#5f88a6;font-weight:800;pointer-events:none}
#armTabs.fits+.armTabHint{display:none}
.armCatIntro{padding:8px 10px 9px;border-radius:10px;text-align:left;box-sizing:border-box;min-width:0;max-width:100%;
  background:linear-gradient(90deg,rgba(35,86,120,.32),rgba(10,22,35,.2));
  border-left:3px solid #41c8ff}
.armCatIntro b{display:block;font-family:var(--fT);font-size:9px;letter-spacing:.16em;color:#9eeaff}
.armCatIntro span{display:block;margin-top:2px;font-size:10px;line-height:1.35;color:#8fb3cc;font-weight:600}

/* Four-section mobile storefront: cinematic hero, one sub-filter row and a
   reviewable basket. The basket stays in normal document flow so it never
   covers the Android system-safe footer or traps the scroll position. */
.armMarketHero{position:relative;min-height:92px;display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;overflow:hidden;text-align:left;border:1px solid rgba(87,202,245,.32);background:radial-gradient(circle at 12% 42%,rgba(57,190,239,.24),transparent 36%),linear-gradient(110deg,rgba(12,43,65,.97),rgba(5,13,22,.99));box-shadow:0 8px 22px rgba(0,0,0,.38)}
.armMarketHero:after{content:'';position:absolute;right:-42px;top:-70px;width:180px;height:180px;border-radius:50%;border:10px double rgba(89,211,255,.07)}.armMarketHero>div{flex:0 0 70px;height:70px;display:grid;place-items:center;border-radius:12px;background:rgba(2,8,14,.58);box-shadow:inset 0 0 17px rgba(84,210,255,.18)}.armMarketHero .itemArt{width:66px!important;height:66px!important;object-fit:contain}.armMarketHero>span{position:relative;min-width:0}.armMarketHero i,.armMarketHero b,.armMarketHero small{display:block}.armMarketHero i{color:#66d9ff;font:900 7px var(--fT);font-style:normal;letter-spacing:.16em}.armMarketHero b{margin-top:5px;color:#f2fbff;font:900 15px var(--fT);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.armMarketHero small{margin-top:5px;color:#9dc3d7;font:700 9px/1.3 var(--fU)}
.armMarketFilters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.armMarketFilter{min-width:0;min-height:43px;padding:4px;border-radius:9px;color:#698da4;border:1px solid rgba(96,153,188,.23);background:rgba(7,17,29,.9);font:850 7px/1 var(--fT);letter-spacing:.04em}.armMarketFilter.on{color:#e8f9ff;border-color:#53cdf8;background:linear-gradient(180deg,rgba(35,110,148,.76),rgba(10,40,62,.94));box-shadow:0 0 10px rgba(61,197,244,.2)}
.armCartBar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px;padding:8px 10px;border:1px solid rgba(255,201,95,.34);border-radius:11px;background:linear-gradient(100deg,rgba(66,48,17,.7),rgba(9,20,32,.96));box-shadow:inset 3px 0 #ffd469;text-align:left}.armCartBar div{min-width:0}.armCartBar span,.armCartBar b{display:block}.armCartBar span{color:#b8924f;font:850 7px/1 var(--fT);letter-spacing:.12em}.armCartBar b{margin-top:4px;color:#ffe49a;font:900 10px/1 var(--fT)}.armCartBar button{flex:0 0 76px;min-height:38px;border-radius:8px;color:#ffdf88;border:1px solid rgba(255,207,98,.45);background:rgba(45,31,8,.6);font:900 8px var(--fT);letter-spacing:.08em}
.armCartPanel{padding:9px;border:1px solid rgba(255,199,88,.3);border-radius:12px;background:linear-gradient(160deg,rgba(35,29,18,.97),rgba(5,12,20,.99));box-shadow:0 8px 23px rgba(0,0,0,.4)}.armCartRows{display:flex;flex-direction:column;gap:5px}.armCartRow{display:grid;grid-template-columns:32px minmax(0,1fr) auto 34px;gap:7px;align-items:center;min-height:50px;padding:5px 5px 5px 8px;border-radius:8px;background:rgba(9,19,30,.78);border:1px solid rgba(115,153,178,.16);text-align:left}.armCartRow>i{font-size:20px;font-style:normal;text-align:center}.armCartRow span{min-width:0}.armCartRow span b,.armCartRow span small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.armCartRow span b{color:#e8f7ff;font:850 8.5px var(--fT)}.armCartRow span small{margin-top:3px;color:#6e90a5;font:750 7px var(--fT);letter-spacing:.04em}.armCartRow strong{color:#ffdf83;font:900 9px var(--fT)}.armCartRow>button{width:34px;height:34px;border-radius:7px;color:#ff9e8d;border:1px solid rgba(255,111,91,.34);background:rgba(60,17,13,.45);font-size:18px}.armCartEmpty{padding:15px 10px;color:#7897aa;font:650 9px/1.4 var(--fU);text-align:center}.armCartTotal{display:flex;justify-content:space-between;align-items:center;margin-top:7px;padding:9px 4px 6px;border-top:1px solid rgba(255,201,91,.19)}.armCartTotal span{color:#9d7c42;font:900 8px var(--fT);letter-spacing:.14em}.armCartTotal b{color:#ffe18a;font:900 14px var(--fT)}.armCartCheckout{width:100%;min-height:50px;border-radius:9px;color:#101008;border:1px solid #fff1ac;background:linear-gradient(180deg,#ffe98d,#d9a82c);box-shadow:0 0 15px rgba(255,197,62,.22);font:950 9px var(--fT);letter-spacing:.08em}.armCartCheckout:disabled{color:#637381;border-color:#4b5d6b;background:rgba(20,31,41,.85);box-shadow:none}.armCommerceState{margin-top:7px;padding:8px 9px;border-radius:8px;border:1px solid rgba(116,147,168,.2);background:rgba(3,9,15,.64);text-align:left}.armCommerceState b,.armCommerceState span{display:block}.armCommerceState b{color:#7e9daf;font:850 7px var(--fT);letter-spacing:.08em}.armCommerceState span{margin-top:4px;color:#607d90;font:650 8px/1.35 var(--fU)}.armCommerceState.ready b{color:#75e7a6}

/* ---- perk rows -------------------------------------------------------------
   Reuses .sItem/.sEm/.sTx/.sTier/.sDs/.sBuy from ui.css so the Armory keeps
   the game's established look; armIt only adds the bits those rules don't
   already cover — the effect line and the "why greyed out" note. */
.armIt{box-sizing:border-box;min-width:0;max-width:100%}
.armIt .sTx{min-width:0}
.fxRow{margin-top:4px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px;
  font-size:10.5px;font-weight:700;line-height:1.35}
.fxNow{color:#bfe0f5}
.fxNow.dim{color:#5c7f99;font-weight:600;font-style:italic}
.fxArrow{color:#5c7f99;font-weight:700}
.fxNext{color:var(--gold)}
.sWarn{margin-top:3px;font-size:9.5px;font-weight:700;color:#ff9c8a}
.sBuy.cant{opacity:.45;filter:saturate(.5)}
.sItem.armIt.cant{opacity:.88}

/* purchase feedback: a short glow so a buy reads as an event, not a silent
   number change underneath the tier badge. */
@keyframes armFlash{
  0%{box-shadow:0 0 0 rgba(255,210,87,0);transform:scale(1)}
  35%{box-shadow:0 0 20px rgba(255,210,87,.8);transform:scale(1.015)}
  100%{box-shadow:0 3px 9px rgba(0,0,0,.45);transform:scale(1)}
}
.sItem.flash{animation:armFlash .6s ease}

/* ---- cosmetic tab: unchanged swatch grid, just no longer glued to the
   bottom of an unsorted list ---------------------------------------------- */
#colorRow{flex-wrap:wrap}

/* ---- persistent mission inventory ---------------------------------------- */
.invLegend{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;padding:2px 0}
.invLegend span{--rar:#aeb9c6;display:flex;align-items:center;gap:3px;font:700 9px var(--fT);letter-spacing:.06em;color:var(--rar)}
.invLegend i{width:6px;height:6px;border-radius:50%;background:var(--rar);box-shadow:0 0 5px var(--rar)}
.invSlotStrip{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.invSlotStrip div{min-width:0;padding:7px 5px;border-radius:8px;text-align:center;background:rgba(14,27,42,.82);border:1px solid rgba(102,153,188,.2)}
.invSlotStrip span{display:block;font:800 9px var(--fT);letter-spacing:.12em;color:#6e95ae}
.invSlotStrip b{display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:800 9px var(--fT);color:#d9f1ff}
.invReadyNote{padding:7px 9px;border-radius:8px;text-align:center;background:rgba(19,50,68,.54);
  color:#8bcce9;font:700 9px var(--fT);letter-spacing:.05em}
.invItem{--rar:#aeb9c6;display:flex;align-items:center;gap:9px;min-height:64px;padding:8px 9px;border-radius:11px;text-align:left;
  background:linear-gradient(180deg,rgba(29,43,59,.96),rgba(9,16,26,.98));border:1px solid rgba(112,159,190,.25);border-left:3px solid var(--rar);
  box-shadow:0 3px 9px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06);touch-action:manipulation}
.invItem.equipped{box-shadow:0 0 14px var(--rar),inset 0 1px 0 rgba(255,255,255,.12)}
.invItem.locked{opacity:.43;filter:saturate(.3)}
.invItem:active:not(.locked){transform:scale(.98)}
.invEm{flex:0 0 34px;text-align:center;color:var(--rar);font-size:27px;line-height:1;filter:drop-shadow(0 0 5px var(--rar))}
.invTx{flex:1;min-width:0}.invTx i{display:block;color:var(--rar);font:800 9px var(--fT);letter-spacing:.12em;font-style:normal}
.invTx b{display:block;margin-top:2px;color:#e9f7ff;font:800 11.5px var(--fT);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.invTx span{display:block;margin-top:3px;color:#93b4ca;font-size:10px;font-weight:600;line-height:1.25}
.invAct{flex:0 0 66px;min-height:40px;padding:5px;display:flex;align-items:center;justify-content:center;text-align:center;border-radius:8px;
  color:var(--rar);background:rgba(5,11,18,.68);border:1px solid var(--rar);font:800 9px var(--fT);letter-spacing:.04em}
.invItem.locked .invAct{border-color:#607486;color:#8495a3;font-size:9px}

/* ---- TWO-LAYER ACCOUNT ARMORY / SESSION LOADOUT ---------------------------
   Isolated `armInv*` names keep this denser interaction model from changing
   perk rows, Development modules, or the in-match inventory presentation. */
.armInvLayerHead{display:flex;align-items:stretch;gap:8px;padding:10px;border-radius:12px;text-align:left;
  border:1px solid rgba(91,177,226,.3);background:linear-gradient(135deg,rgba(21,56,81,.94),rgba(7,16,27,.98));
  box-shadow:0 5px 16px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07)}
.armInvLayerHead.session{border-color:rgba(255,205,91,.34);background:linear-gradient(135deg,rgba(67,49,19,.58),rgba(8,17,29,.98))}
.armInvLayerHead>div:first-child{flex:1;min-width:0}
.armInvLayerHead i{display:block;color:#70d9ff;font:800 9px var(--fT);font-style:normal;letter-spacing:.17em}
.armInvLayerHead.session i{color:#ffd86d}
.armInvLayerHead>div>b{display:block;margin-top:3px;color:#e8f8ff;font:900 15px var(--fT);letter-spacing:.09em}
.armInvLayerHead>div>span{display:block;margin-top:4px;color:#9abbd1;font-size:10px;font-weight:600;line-height:1.3}
.armInvCapacity{flex:0 0 88px;display:flex!important;flex-direction:column;align-items:center;justify-content:center;padding:6px;
  border-radius:9px;text-align:center;background:rgba(3,10,17,.6);border:1px solid rgba(117,196,238,.22)}
.armInvCapacity b{margin:0!important;color:#8ce7ff!important;font-size:18px!important;letter-spacing:.02em!important;font-variant-numeric:tabular-nums}
.armInvLayerHead.session .armInvCapacity b{color:#ffe083!important}
.armInvCapacity span{margin-top:2px!important;color:#779ab1!important;font:800 9px var(--fT)!important;letter-spacing:.1em!important}
.armInvMeters{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.armInvMeters div{min-width:0;padding:7px 4px;border-radius:8px;text-align:center;background:rgba(10,23,36,.86);border:1px solid rgba(90,147,182,.18)}
.armInvMeters b{display:block;color:#d9f4ff;font:800 10px var(--fT);font-variant-numeric:tabular-nums}
.armInvMeters span{display:block;margin-top:2px;color:#6389a2;font:800 9px var(--fT);letter-spacing:.08em;white-space:nowrap}

.armInvFilters{display:flex;gap:5px;max-width:100%;overflow-x:auto;padding:1px 0 3px;scrollbar-width:none;overscroll-behavior-x:contain}
.armInvFilters::-webkit-scrollbar{display:none}
.armInvFilter{flex:0 0 auto;min-width:72px;min-height:46px;padding:0 10px;border-radius:9px;color:#789cb5;
  border:1px solid rgba(99,155,190,.26);background:linear-gradient(180deg,rgba(23,39,56,.96),rgba(8,16,27,.97));
  font:800 9px var(--fT);letter-spacing:.08em;touch-action:manipulation}
.armInvFilter.on{color:#d8f6ff;border-color:#52cfff;background:linear-gradient(180deg,rgba(37,112,151,.8),rgba(12,45,70,.96));box-shadow:0 0 10px rgba(65,200,255,.28)}

.armInvPreview{--rar:#aeb9c6;display:grid;grid-template-columns:58px minmax(0,1fr) 82px;gap:8px;align-items:center;padding:10px;border-radius:13px;text-align:left;
  border:1px solid var(--rar);border-left:4px solid var(--rar);background:radial-gradient(circle at 8% 20%,color-mix(in srgb,var(--rar) 18%,transparent),transparent 36%),linear-gradient(145deg,rgba(27,42,58,.98),rgba(5,12,21,.99));
  box-shadow:0 4px 15px rgba(0,0,0,.48),0 0 14px color-mix(in srgb,var(--rar) 16%,transparent)}
.armInvPreviewArt{width:54px;height:54px;display:flex;align-items:center;justify-content:center;border-radius:10px;
  background:rgba(2,8,14,.55);box-shadow:inset 0 0 12px color-mix(in srgb,var(--rar) 22%,transparent)}
.armInvPreviewArt .itemArt{width:54px!important;height:54px!important;object-fit:contain}
.armInvPreviewInfo{min-width:0}.armInvPreviewInfo i{display:block;color:var(--rar);font:800 9px var(--fT);font-style:normal;letter-spacing:.1em}
.armInvPreviewInfo b{display:block;margin-top:3px;color:#f1faff;font:900 13px var(--fT);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.armInvPreviewInfo span{display:block;margin-top:4px;color:#799bb2;font:700 9px var(--fT);letter-spacing:.07em}
.armInvExact{align-self:stretch;min-width:0;padding:6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:9px;
  background:rgba(2,8,14,.67);border:1px solid color-mix(in srgb,var(--rar) 45%,transparent)}
.armInvExact span{color:#7697ad;font:800 9px var(--fT);letter-spacing:.08em}.armInvExact b{margin-top:2px;color:var(--rar);font:900 15px var(--fT)}
.armInvExact i{margin-top:2px;color:#bad2e1;font:800 9px var(--fT);font-style:normal;letter-spacing:.05em}
.armInvPreview p{grid-column:1/-1;margin:0;color:#acc7d8;font-size:10.5px;font-weight:600;line-height:1.35}
.armInvCompare{grid-column:1/-1;padding:6px 8px;border-radius:7px;color:#d0e9f5;background:rgba(51,102,132,.18);
  border-left:2px solid var(--rar);font:800 9px var(--fT);letter-spacing:.055em;line-height:1.35}
.armInvCommit{grid-column:1/-1;min-height:48px;border-radius:9px;color:#081018;border:1px solid transparent;
  background:linear-gradient(180deg,color-mix(in srgb,var(--rar) 74%,white),var(--rar));font:900 9px var(--fT);letter-spacing:.1em;touch-action:manipulation}
.armInvCommit.disabled{color:#637889;border-color:#526575;background:rgba(19,30,41,.85)}
.armInvPreview small{grid-column:1/-1;color:#6f90a6;font-size:9px;font-weight:600;line-height:1.35;text-align:center}
.armInvSectionLabel{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 2px}
.armInvSectionLabel b{color:#93ddfa;font:800 9px var(--fT);letter-spacing:.14em}.armInvSectionLabel span{color:#607f94;font:800 9px var(--fT);letter-spacing:.07em}

.armVaultList{display:flex;flex-direction:column;gap:6px}
.armVaultItem{--rar:#aeb9c6;width:100%;min-height:68px;display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:10px;text-align:left;
  color:inherit;border:1px solid rgba(105,149,178,.23);border-left:3px solid var(--rar);background:linear-gradient(180deg,rgba(25,39,54,.96),rgba(7,14,23,.98));
  box-shadow:0 3px 8px rgba(0,0,0,.38);touch-action:manipulation}
.armVaultItem.selected{border-color:var(--rar);box-shadow:0 0 12px color-mix(in srgb,var(--rar) 34%,transparent),inset 0 1px 0 rgba(255,255,255,.08)}
.armVaultItem.equipped{background:linear-gradient(90deg,color-mix(in srgb,var(--rar) 13%,rgba(15,28,42,.98)),rgba(7,14,23,.98))}
.armVaultItem.locked{opacity:.42;filter:saturate(.35)}
.armVaultArt{flex:0 0 42px;height:44px;display:flex;align-items:center;justify-content:center}.armVaultArt .itemArt{width:40px!important;height:40px!important;object-fit:contain}
.armVaultCopy{flex:1;min-width:0}.armVaultCopy i{display:block;color:var(--rar);font:800 9px var(--fT);font-style:normal;letter-spacing:.1em}
.armVaultCopy b{display:block;margin-top:2px;color:#e9f7ff;font:800 10.5px var(--fT);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.armVaultCopy em{display:block;margin-top:3px;color:#93b5ca;font-size:9px;font-weight:700;font-style:normal}
.armVaultState{flex:0 0 65px;min-height:34px;display:flex;align-items:center;justify-content:center;padding:3px;border-radius:7px;text-align:center;
  color:var(--rar);background:rgba(2,8,14,.56);border:1px solid color-mix(in srgb,var(--rar) 60%,transparent);font:800 9px var(--fT);letter-spacing:.05em}
.armInvEmpty{padding:18px 12px;border-radius:10px;text-align:center;background:rgba(10,22,35,.74);border:1px dashed rgba(95,153,189,.3)}
.armInvEmpty b{display:block;color:#a6cadd;font:800 9px var(--fT);letter-spacing:.1em}.armInvEmpty span{display:block;margin-top:4px;color:#6d8da2;font-size:9.5px;font-weight:600}

.armLoadoutRule{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:9px;text-align:left;
  background:linear-gradient(90deg,rgba(111,77,20,.35),rgba(11,24,38,.88));border-left:3px solid #ffd567}
.armLoadoutRule b{color:#ffe08a;font:900 9px var(--fT);letter-spacing:.1em;white-space:nowrap}.armLoadoutRule span{color:#a9bdc9;font-size:9px;font-weight:600;text-align:right}
.armLoadoutGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.armLoadSlot{--rar:#758da0;min-width:0;min-height:126px;display:flex;flex-direction:column;padding:8px;border-radius:11px;text-align:left;
  border:1px solid color-mix(in srgb,var(--rar) 48%,transparent);border-top:3px solid var(--rar);background:linear-gradient(150deg,color-mix(in srgb,var(--rar) 10%,rgba(20,34,48,.98)),rgba(5,12,20,.99));box-shadow:0 4px 10px rgba(0,0,0,.4)}
.armLoadSlot.empty{border-style:dashed;opacity:.86}.armLoadSlotTop{display:flex;justify-content:space-between;gap:5px}.armLoadSlotTop i{color:var(--rar);font:900 9px var(--fT);font-style:normal;letter-spacing:.1em}
.armLoadSlotTop span{color:#6c8da3;font:800 9px var(--fT);letter-spacing:.07em}.armLoadSlot>b{margin-top:14px;color:#99b6c8;font:800 9px var(--fT)}
.armLoadSlot>small{display:block;margin-top:4px;color:#6e8da1;font-size:9px;font-weight:600;line-height:1.25}
.armLoadEquipped{display:flex;align-items:center;gap:6px;margin-top:8px;min-width:0}.armLoadEquipped>span{flex:0 0 38px;height:38px;display:flex;align-items:center;justify-content:center}
.armLoadEquipped .itemArt{width:36px!important;height:36px!important;object-fit:contain}.armLoadEquipped>div{min-width:0}.armLoadEquipped b{display:block;color:#edf9ff;font:800 9px var(--fT);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.armLoadEquipped em{display:block;margin-top:3px;color:var(--rar);font-size:9px;font-weight:800;font-style:normal;line-height:1.2}
.armLoadSlot button{width:100%;min-height:44px;margin-top:auto;border-radius:8px;color:var(--rar);border:1px solid color-mix(in srgb,var(--rar) 68%,transparent);
  background:rgba(4,10,17,.7);font:900 9px var(--fT);letter-spacing:.09em;touch-action:manipulation}
.armLoadSlot.empty button{color:#9bdfff;border-color:#3aaedc;background:rgba(25,83,111,.25)}
.armMissionPackage{padding:9px;border-radius:12px;text-align:left;background:linear-gradient(160deg,rgba(18,35,51,.96),rgba(5,12,20,.99));border:1px solid rgba(91,153,190,.24)}
.armMissionFx{--rar:#aeb9c6;display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:7px;align-items:center;padding:7px 4px;border-bottom:1px solid rgba(99,142,168,.13)}
.armMissionFx>i{width:7px;height:7px;border-radius:50%;background:var(--rar);box-shadow:0 0 6px var(--rar)}.armMissionFx div{min-width:0}
.armMissionFx div b{display:block;color:#dceef7;font:800 9px var(--fT);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.armMissionFx div span{display:block;margin-top:2px;color:#698ba0;font:700 9px var(--fT);letter-spacing:.07em}
.armMissionFx strong{max-width:115px;color:var(--rar);font:800 9px var(--fT);text-align:right}.armMissionPackage>p{margin:8px 3px 1px;color:#738fa2;font-size:9px;font-weight:600;line-height:1.35;text-align:center}
.armReturnVault{min-height:48px;border-radius:9px;color:#b9ecff;border:1px solid #46bde9;background:linear-gradient(180deg,rgba(37,100,135,.7),rgba(12,39,61,.94));
  font:900 9px var(--fT);letter-spacing:.11em;touch-action:manipulation}

@media(max-width:350px){
  .armInvPreview{grid-template-columns:50px minmax(0,1fr) 72px;padding:8px;gap:6px}
  .armInvPreviewArt,.armInvPreviewArt .itemArt{width:48px!important;height:48px!important}
  .armInvCapacity{flex-basis:78px}.armLoadoutGrid{grid-template-columns:1fr}
}

/* ---------- ITEM 5b — chassis lock picker (src/storeui.js) ----------
   A type-scoped consumable needs a target before it can be readied, so the
   chooser sits between the effect copy and the commit button, where the eye
   already is. Chips are 34px tall and wrap: 26 chassis is a lot of names, and
   a horizontal scroller hides the ones at the end. */
.armInvLock{margin:9px 0 4px;padding:9px 10px;border-radius:10px;
  border:1px solid rgba(120,160,190,.32);background:rgba(6,14,23,.5)}
.armInvLock>span{display:block;color:#79bfdf;font:900 9px/1.4 var(--fT);letter-spacing:.16em}
.armInvLock>i{display:block;margin-top:6px;color:#9fc4dc;font:600 10.5px/1.35 var(--fU);font-style:normal}
.armInvLockRow{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.armInvChip{min-height:34px;padding:6px 9px;border-radius:8px;border:1px solid transparent;
  background:var(--panelG2) padding-box,var(--steelB) border-box;color:#cfe6f6;
  font:800 9px/1.1 var(--fT);letter-spacing:.06em;white-space:nowrap}
.armInvChip.on{background:var(--panelG2) padding-box,var(--goldB) border-box;color:#ffe9ad;
  box-shadow:0 0 12px rgba(255,200,90,.25)}
.armInvChip:active{filter:brightness(1.25)}
.armInvLockOn{border-color:rgba(255,200,90,.45);display:flex;align-items:center;gap:9px}
.armInvLockOn>b{color:#ffe9ad;font:900 11px/1.2 var(--fT);letter-spacing:.1em}

/* ---------- STAGE 8 — META ECONOMY QUALITY ----------------------------------
   Glassmorphism storefront, pinned wallet, daily deals, purchase flash,
   restocking and locked-item teases. All cosmetic or off-line-first economy
   touches; nothing here adds a network call. */

/* ---- glass panel -----------------------------------------------------------
   The base .overlay is an opaque black sheet (rgba(3,7,14,.9), blur 6px). The
   Armory overrides it with a translucent tint and a heavier blur so the menu
   battlefield stays alive behind the store instead of being switched off. */
#armory{background:rgba(9,17,27,.55);backdrop-filter:blur(16px) saturate(1.25);-webkit-backdrop-filter:blur(16px) saturate(1.25)}

/* ---- pinned wallet + category bar ------------------------------------------
   One sticky wrapper carries both the currency HUD and the tabs; the shared
   .armTabWrap's own stickiness is disabled inside it so the two never fight. */
.armStickyHead{position:sticky;top:0;z-index:7;flex:0 0 auto;min-width:0;max-width:100%;
  margin:0 0 2px;padding:6px 0 4px;border-radius:12px;
  background:linear-gradient(180deg,rgba(4,10,16,.98),rgba(4,10,16,.9) 74%,rgba(4,10,16,.16))}
.armStickyHead .armTabWrap{position:static;padding-top:2px;background:none;z-index:auto}
.armStat.cr b{color:#8be8ff}
.armStat.rd b{color:#e3c9ff;text-shadow:0 0 8px rgba(182,124,255,.45)}

/* ---- daily deals ----------------------------------------------------------- */
.armDeals{border-radius:12px;padding:9px;text-align:left;min-width:0;max-width:100%;box-sizing:border-box;
  border:1px solid rgba(255,190,90,.28);background:linear-gradient(150deg,rgba(74,48,14,.55),rgba(14,24,36,.92));
  box-shadow:0 4px 12px rgba(0,0,0,.4)}
.armDealsHd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.armDealsHd b{color:#ffd980;font:900 9px var(--fT);letter-spacing:.16em;white-space:nowrap}
.armDealsHd span{color:#b98a45;font:800 8.5px var(--fT);letter-spacing:.07em;text-align:right}
.armDealRow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:7px}
.armDeal{min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:10px;text-align:center;
  color:inherit;border:1px solid rgba(255,190,90,.22);background:rgba(5,11,18,.7);touch-action:manipulation}
.armDeal.sold{opacity:.55;filter:saturate(.4)}
.armDealArt{width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.armDealArt .itemArt{width:30px!important;height:30px!important;object-fit:contain}
.armDealTx{min-width:0;max-width:100%}.armDealTx i{display:block;color:#e8c07a;font:800 8.5px var(--fT);font-style:normal;letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.armDealTx b{display:block;margin-top:2px;color:#f4f9fd;font:900 9px var(--fT)}
.armDealTx em{display:block;margin-top:2px;color:#8fa9ba;font-size:8.5px;font-weight:700;font-style:normal;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.armDealPrice{margin-top:2px;display:flex;align-items:baseline;justify-content:center;gap:4px;font:900 10px var(--fT)}
.armDealPrice s{color:#8b6b3c;font-size:9px;font-weight:700}
.armDealPrice b{color:#ffe9a3;text-shadow:0 0 8px rgba(255,200,90,.5)}
.armDeal.sold .armDealPrice{color:#7f96a6;font-size:9px}

/* ---- purchase flash overlay ------------------------------------------------
   pointer-events:none so the burst never swallows the tap that bought the
   item; JS removes it on a timer because renderArmory replaces innerHTML. */
.armBuyFlash{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  pointer-events:none;
  background:radial-gradient(circle at 50% 46%,rgba(255,214,120,.3),rgba(8,12,20,.06) 42%,rgba(4,8,14,.5) 78%);
  animation:armFlashFade .9s ease both}
.armBuyFlash i{font-size:64px;line-height:1;filter:drop-shadow(0 0 18px rgba(255,200,90,.95));
  animation:armFlashPop .9s cubic-bezier(.18,.9,.3,1.35) both}
.armBuyFlash b{color:#ffe9ad;font:900 13px var(--fT);letter-spacing:.22em;text-shadow:0 0 14px rgba(255,190,80,.9);
  animation:armFlashPop .9s cubic-bezier(.18,.9,.3,1.35) both}
@keyframes armFlashFade{0%{opacity:0}25%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes armFlashPop{0%{transform:scale(.4);opacity:0}30%{transform:scale(1.12);opacity:1}45%{transform:scale(1)}100%{transform:scale(1.04) translateY(-8px);opacity:1}}

/* ---- store entrance --------------------------------------------------------
   Plays only on the first render of a visit (opening flag in renderArmory).
   Direct children stagger in with a slide; the category icons and deal cards
   pop afterwards so the panel reads as arriving whole, not as a list re-drawn.
   --i is set inline by renderArmory on every render and is harmless when the
   class is absent. */
@keyframes armSlideIn{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes armIconIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
#storeList.armEnter>*{animation:armSlideIn .42s cubic-bezier(.16,.84,.3,1) both;animation-delay:calc(var(--i,0)*.035s)}
#storeList.armEnter .tabBtn{animation:armIconIn .3s cubic-bezier(.16,.84,.3,1) both;animation-delay:calc(.18s + var(--i,0)*.04s)}
#storeList.armEnter .armDeal{animation:armIconIn .3s cubic-bezier(.16,.84,.3,1) both;animation-delay:calc(.3s + var(--i,0)*.05s)}

/* ---- loadout / inventory preview touches ----------------------------------- */
.armInvRestock{grid-column:1/-1;min-height:44px;border-radius:9px;color:#ffd980;
  border:1px solid rgba(255,190,90,.4);background:rgba(58,38,8,.5);
  font:900 9px var(--fT);letter-spacing:.1em;touch-action:manipulation}
.armVaultDelta{display:block;margin-top:3px;color:#6dff9a;font:800 8.5px var(--fT);letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.armVaultReq{display:block;margin-top:3px;color:#a8c4d8;font:800 8.5px var(--fT);letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(hover:hover){
  /* Pointer devices get a hover highlight that also nudges the row so the
     stat-delta chip reads as being revealed, not just recoloured. */
  .armVaultItem:hover{border-color:var(--rar);transform:translateX(2px);
    box-shadow:0 0 10px color-mix(in srgb,var(--rar) 30%,transparent)}
}

/* ---- locked-item silhouette -------------------------------------------------
   A locked vault row blacks out its art into a shape with a lock glyph and
   names the unlock route in place of the effect line. */
.armVaultItem.locked .armVaultArt{position:relative;filter:brightness(.28) grayscale(1) contrast(1.5);opacity:.95}
.armVaultItem.locked .armVaultArt::after{content:'🔒';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:17px;text-shadow:0 1px 3px #000}