{ "_comment": "SHOP UI — the buy/sell (and buyback) screen over the shop clip (data/shopui.json). LAYOUT: the two 4×4 grids sit side by side (SELL = the player's cargo bays on the LEFT, BUY = the shop's stock on the RIGHT), a center column carries the live NET preview + Confirm/Clear, and a tab bar up top toggles Buy/Sell ↔ Buyback (Buyback is disabled until the player has SOLD something this session). The panels are semi-transparent so the shop clip shows through; items + text are full alpha. GEOMETRY (slot/gap/gridCols/gridRows/centerW) is primitives the code (js/ui/shop/ShopView.js) lays out against the live scene size — not pixel positions. The ECONOMY itself (prices, stock) is Economy.js + data/goods.json + data/economy.json; this file is only presentation.", "enabled": true, "tabs": { "_comment": "The sub-menu (two buttons). Buy/Sell opens the trade panel; Buyback opens the buyback panel (goods sold this session, session-local only). `disabledAlpha` is the Buyback dim until the player has sold something.", "buySell": "Buy/Sell", "buyback": "Buyback", "w": 184, "h": 46, "gap": 14, "y": 44, "activeAccent": "#00e5ff", "disabledAlpha": 0.34 }, "panel": { "_comment": "The semi-transparent panel behind each side's grid — the shop clip shows through it (bgAlpha < 1) but the goods + labels sit at full alpha on top.", "bgColor": "#0a1120", "bgAlpha": 0.70, "border": "#22405f", "pad": 16, "title": { "fontSize": 21, "color": "#eaf6ff", "h": 34 } }, "grid": { "_comment": "The 4×4 grid shared by both sides (data/economy.json → cargo.maxSlots = 16 slots). SELL: the first `capacity` cells are live cargo bays (one good each), the rest are locked (the hold's upgrade room). BUY: the shop's stock (12–16) fills the first N, the rest are empty.", "cols": 4, "rows": 4, "slot": 96, "gap": 10, "centerW": 208 }, "slot": { "_comment": "A single bay/stock cell. `bg` is the cell plate, `selected` the SELL-check highlight (a bay marked to sell), `stepper` the BUY quantity control. `lockAlpha` dims the locked/empty cells. Colors follow the theme (cyan selection, gold buy, green sell, magenta = bad).", "bgColor": "#0e1728", "border": "#1d2e4c", "selected": "#00e5ff", "lockAlpha": 0.30, "iconScale": 0.58, "name": { "fontSize": 11, "color": "#eaf6ff" }, "price": { "fontSize": 12, "sell": "#7ce8a4", "buy": "#ffc94d" }, "emptyLabel": "—", "lockLabel": "locked" }, "stepper": { "_comment": "The BUY-side quantity stepper (− n +). Clicking −/+ adjusts that good's buy quantity; the live preview recalcs. The sell side is bay-based (each bay = 1 unit, tap to check), so it has no stepper.", "fontSize": 19, "color": "#eaf6ff", "btn": "#7d92c4", "activeColor": "#00e5ff" }, "preview": { "_comment": "The live NET-credits readout in the center column. Positive (you're up) = green, negative (you'd spend past your credits / it's a net spend) = the value shown; the Confirm button is disabled while the trade is invalid (can't go negative, hold overflows).", "label": "NET", "labelColor": "#7d92c4", "labelFontSize": 13, "valueFontSize": 34, "posColor": "#7ce8a4", "negColor": "#ff2d6f" }, "buttons": { "_comment": "Confirm (execute the trade) + Clear (reset this side's selection) — they appear once the player starts checking/stepping items. `disabled` dims Confirm while the trade is invalid. `back` is a reserved return-to-menu label (the deck's Leave Shop is the real exit). Separate *Label (text) and *Accent (color) keys so they don't collide.", "w": 158, "h": 54, "confirmLabel": "Confirm", "clearLabel": "Clear", "backLabel": "‹ Menu", "accent": "#00e5ff", "confirmAccent": "#7ce8a4", "clearAccent": "#7d92c4", "disabled": "#7d92c4" }, "animation": { "_comment": "Reveal: the SELL grid slides in from the left, the BUY grid from the right, the center column fades up (data/shopui.json → animation). A short stagger per row keeps it feeling assembled rather than popped.", "slideMs": 340, "staggerMs": 26, "ease": "Cubic.Out" } }