/* Dedicated imagegen materials; every label, number and socket is live UI.
   Scope the complete geometry so legacy card/list rules cannot stretch it. */
#game #modal:has(#content-root:is([data-screen=trade],[data-screen=shop])){
 --commerce-frame:url('/public/assets/commerce-panel-v1.webp');
 --commerce-button:url('/public/assets/commerce-button-v1.webp');
 --cx-gap:12px;--cx-pad:14px;
 width:min(1180px,96cqw);height:min(690px,94cqh);padding:20px;
 border-image:var(--commerce-frame) 32 fill / 8px / 0 stretch!important;
 background:#181714!important;color:#e7e3d8;
}
#game #modal:has(.commerce-sheet)>header{margin-bottom:12px;padding-bottom:10px;min-height:38px;border-color:#b4a18440}
#game #modal:has(.commerce-sheet) #modal-body{overflow:hidden;padding:0}
#game #modal:has(.commerce-sheet) :is(#content-root,.content-body){height:100%;min-height:0}
#game #modal .commerce-sheet{height:100%;min-height:0;display:flex;flex-direction:column;gap:var(--cx-gap);font:var(--ui-body)/1.45 var(--ui-font);color:#e7e3d8}
#game #modal .commerce-sheet *{box-sizing:border-box;min-width:0}
#game #modal .commerce-workspace{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);gap:var(--cx-gap)}
#game #modal .is-shop .commerce-workspace{grid-template-columns:repeat(2,minmax(0,1fr))}
#game #modal .commerce-panel{display:flex;flex-direction:column;gap:8px;min-height:0;padding:var(--cx-pad);border:1px solid #93836a55;background:#12120fe8;box-shadow:inset 0 1px #ddc8a80a}
#game #modal .commerce-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;flex:none;min-height:26px;padding-bottom:8px;border-bottom:1px solid #b4a18433}
#game #modal .commerce-heading h3{font:600 var(--ui-section)/1.4 var(--ui-font);margin:0;color:#e8ddc7;white-space:nowrap}
#game #modal .commerce-heading small{font-size:var(--ui-meta);color:#a9a79c;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#game #modal .commerce-categories{display:flex;flex:none;gap:4px}
#game #modal .commerce-categories button{flex:1;min-height:32px;padding:5px 0;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:#a9a79c;font-size:var(--ui-meta);white-space:nowrap}
#game #modal .commerce-categories button[aria-pressed=true]{border-bottom-color:#c4ad7e;color:#f2dfb6}
#game #modal :is(.commerce-bag-grid,.commerce-offer-grid){flex:1;min-height:0;container-type:size;display:grid;place-items:center}
#game #modal .commerce-bag-slots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:6px;width:min(100cqw,calc(100cqh * 1.25));aspect-ratio:5/4}
#game #modal .commerce-offer-slots.content-trade-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:6px;width:min(100cqw,calc(100cqh * 1.33333));aspect-ratio:4/3;min-height:0;margin:0;padding:0}
#game #modal .commerce-slot{position:relative;display:block;width:100%;height:100%;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:var(--ui-slot) center/100% 100% no-repeat;box-shadow:none;overflow:hidden}
#game #modal .commerce-slot[aria-pressed=true]{outline:2px solid #e0c88e;outline-offset:1px}
#game #modal .commerce-slot:hover{filter:brightness(1.18)}
#game #modal .commerce-slot.is-empty{opacity:.35}
#game #modal .commerce-slot .content-item-image{position:absolute;inset:14%;width:72%;height:72%;padding:0;margin:0;background:none;object-fit:contain}
#game #modal :is(.commerce-stack,.commerce-upgrade,.commerce-mark){position:absolute;z-index:1;font:600 var(--ui-meta)/1.2 var(--ui-font);text-shadow:1px 1px 2px #000,-1px -1px 2px #000;pointer-events:none}
#game #modal .commerce-stack{bottom:8%;right:8%;color:#fff8e3}
#game #modal .commerce-upgrade{top:8%;right:8%;color:#e8d4a1}
#game #modal .commerce-mark{top:8%;left:8%;color:#bfc7bc}
#game #modal .commerce-mark.is-offered{color:#b9d6a6}
#game #modal .commerce-slot[data-rarity=rare]{box-shadow:inset 0 0 0 1px #859eb877}
#game #modal .commerce-pages{flex:none;display:flex;align-items:center;justify-content:center;gap:16px;height:30px;font-size:var(--ui-meta);color:#b8b3a4}
#game #modal .commerce-pages .commerce-button{min-height:28px;padding:2px 12px}
#game #modal .commerce-wallet{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #a8946c33;padding-top:8px;font-size:var(--ui-meta);color:#a9a79c}
#game #modal .commerce-wallet b{font-size:var(--ui-body);font-weight:500;color:#e1c68c}
#game #modal .commerce-wallet small{font-size:var(--ui-meta)}
#game #modal .commerce-exchange{display:flex;flex-direction:column;gap:8px;min-height:0}
#game #modal .commerce-trade-state{flex:none;font-size:var(--ui-meta);color:#b8b1a0;min-height:22px;display:flex;align-items:center}
#game #modal .commerce-offers{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cx-gap)}
#game #modal .commerce-offer .commerce-heading{flex-wrap:wrap;gap:4px}
#game #modal .commerce-offer-gold{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--ui-control);font-size:var(--ui-meta);color:#b7b0a0}
#game #modal .commerce-offer-gold input{min-width:0;width:100%;flex:1;font-size:var(--ui-body);padding:6px 8px;min-height:var(--ui-control);color:#edcf8e;background:#0c0d0b}
#game #modal .commerce-offer-gold b{color:#edcf8e;font-size:var(--ui-body);font-weight:500}
#game #modal .commerce-offer .trade-offer-status{flex:none;display:block;height:auto;min-height:22px;padding:8px 0 0;margin:0;border-top:1px solid #a8946c33;font-size:var(--ui-meta);color:#a9a79c}
#game #modal .commerce-offer .trade-offer-status[data-locked=true]{color:#b8d3a8}
#game #modal .commerce-detail{flex:0 0 100px;height:100px;display:flex;align-items:center;gap:14px;min-height:0;padding:12px 0;border-top:1px solid #b4a18440;border-bottom:1px solid #b4a18440}
#game #modal .commerce-detail-art{position:relative;width:56px;height:56px;flex:none;background:var(--ui-slot) center/100% 100%}
#game #modal .commerce-detail-art .content-item-image{position:absolute;inset:14%;width:72%;height:72%;object-fit:contain}
#game #modal .commerce-detail-text{flex:1;display:flex;flex-direction:column;gap:4px;max-height:100%;min-height:0;overflow-y:auto;padding-right:22px;overscroll-behavior:contain}
#game #modal .commerce-detail-text>*{flex:none}
#game #modal .commerce-detail-text>strong{font-size:var(--ui-body);line-height:1.5;color:#eee0bf}
#game #modal .commerce-detail-text>small{font-size:var(--ui-meta);color:#b1b6a5;line-height:1.5;overflow-wrap:anywhere}
#game #modal .commerce-selection-note{font-size:var(--ui-meta);color:#deb18c}
#game #modal .commerce-selection-note:empty{display:none}
#game #modal .commerce-quantity{flex:none;display:grid;gap:4px}
#game #modal .commerce-quantity label{font-size:var(--ui-meta);color:#aaa69a}
#game #modal .commerce-quantity>div{display:flex;gap:4px;align-items:center}
#game #modal .commerce-quantity input{width:62px;text-align:center;padding:5px 2px;background:#0c0d0b}
#game #modal .commerce-quantity .commerce-button{padding:4px 10px}
#game #modal .commerce-detail-action{display:grid;gap:4px;flex:none;min-width:120px}
#game #modal .commerce-price{display:flex;justify-content:space-between;gap:12px;font-size:var(--ui-meta);color:#a9a79c}
#game #modal .commerce-price b{font-weight:500;color:#e6cc8c}
#game #modal .commerce-button{flex:none;min-height:var(--ui-control);min-width:0;border:4px solid transparent;border-image:var(--commerce-button) 32 fill / 4px / 0 stretch;border-radius:0;background:#292824;color:#e6dfcc;padding:6px 14px;font:500 var(--ui-body)/1.35 var(--ui-font);white-space:nowrap;box-shadow:none;letter-spacing:0}
#game #modal .commerce-button:hover:not(:disabled){filter:brightness(1.2)}
#game #modal .commerce-button[data-content-action=trade-confirm]:not(:disabled){color:#f2d990;border-image-width:5px}
#game #modal .commerce-button:disabled{opacity:.38}
#game #modal .commerce-footer{flex:0 0 var(--ui-control);height:var(--ui-control);display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:0}
#game #modal .commerce-footer-actions{display:flex;gap:8px;margin-left:auto}
#game #modal .commerce-footer :is(.trade-validation,.commerce-footnote){font-size:var(--ui-meta);line-height:1.5;color:#b6b0a0}
#game #modal .commerce-footer .trade-validation{color:#e4b691}
#game #modal .commerce-footer .trade-validation{max-height:100%;overflow-y:auto;padding-right:20px}
#game #modal .commerce-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:16px 12px;min-height:0;overflow-y:auto;padding:4px 6px 8px 0}
#game #modal .commerce-stock{display:flex;align-items:center;gap:10px}
#game #modal .commerce-stock .commerce-slot{width:58px;height:58px;flex:none}
#game #modal .commerce-stock>div{display:flex;flex-direction:column;gap:6px}
#game #modal .commerce-stock strong{font-size:var(--ui-body);line-height:1.5;font-weight:500}
#game #modal .commerce-stock span{font-size:var(--ui-meta);color:#dac18c}
body.gamepad #game #modal:has(#content-root:is([data-screen=trade],[data-screen=shop])){--cx-gap:calc(6px * var(--inverse-ui-scale));--cx-pad:calc(8px * var(--inverse-ui-scale));width:96cqw;height:96cqh;max-height:96cqh;padding:calc(10px * var(--inverse-ui-scale))}
body.gamepad #game #modal:has(.commerce-sheet)>header{margin-bottom:var(--cx-gap);padding-bottom:var(--cx-gap);min-height:var(--ui-close)}
body.gamepad #game #modal .commerce-panel{gap:calc(4px * var(--inverse-ui-scale))}
body.gamepad #game #modal .commerce-bag{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:calc(4px * var(--inverse-ui-scale)) calc(6px * var(--inverse-ui-scale))}
body.gamepad #game #modal .commerce-bag .commerce-heading{grid-area:1/1/2/2;border:0;padding:0}
body.gamepad #game #modal .commerce-bag .commerce-heading small{display:none}
body.gamepad #game #modal .commerce-bag .commerce-heading h3{font-size:var(--ui-body)}
body.gamepad #game #modal .commerce-bag .commerce-categories{grid-area:1/2/2/3}
body.gamepad #game #modal .commerce-bag-grid{grid-area:2/1/3/3}
body.gamepad #game #modal .commerce-pages{grid-area:3/1/4/2}
body.gamepad #game #modal .commerce-wallet{grid-area:3/2/4/3;border:0;padding:0;justify-content:flex-end}
body.gamepad #game #modal .commerce-wallet>span{display:none}
body.gamepad #game #modal .commerce-heading{padding-bottom:var(--cx-gap);min-height:0}
body.gamepad #game #modal :is(.commerce-bag-slots,.commerce-offer-slots.content-trade-list){grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));width:min(100cqw,calc(100cqh * 3));aspect-ratio:3}
body.gamepad #game #modal .commerce-categories button{min-height:calc(24px * var(--inverse-ui-scale));padding:4px 0}
body.gamepad #game #modal .commerce-pages{height:calc(24px * var(--inverse-ui-scale));gap:14px}
body.gamepad #game #modal .commerce-pages .commerce-button{min-height:calc(22px * var(--inverse-ui-scale));padding:0 12px}
body.gamepad #game #modal .commerce-wallet{padding-top:var(--cx-gap)}
body.gamepad #game #modal .commerce-trade-state{min-height:0;line-height:1.35}
body.gamepad #game #modal .commerce-offer-gold{gap:6px}
body.gamepad #game #modal .commerce-offer-gold .commerce-button{padding-inline:8px}
body.gamepad #game #modal .commerce-offer .trade-offer-status{padding-top:var(--cx-gap);min-height:0}
body.gamepad #game #modal .commerce-detail{flex-basis:calc(60px * var(--inverse-ui-scale));height:calc(60px * var(--inverse-ui-scale));min-height:0;padding:var(--cx-gap) 0;gap:var(--cx-gap)}
body.gamepad #game #modal .commerce-detail-art{width:calc(36px * var(--inverse-ui-scale));height:calc(36px * var(--inverse-ui-scale))}
body.gamepad #game #modal .commerce-detail-text{max-height:100%}
body.gamepad #game #modal .commerce-detail-action{min-width:calc(90px * var(--inverse-ui-scale))}
body.gamepad #game #modal .commerce-quantity input{width:calc(32px * var(--inverse-ui-scale))}
body.gamepad #game #modal .commerce-quantity .commerce-button{padding-inline:10px}
body.gamepad #game #modal .commerce-catalog{gap:var(--cx-gap);grid-template-columns:repeat(2,minmax(0,1fr))}
body.gamepad #game #modal .commerce-stock .commerce-slot{width:calc(34px * var(--inverse-ui-scale));height:calc(34px * var(--inverse-ui-scale))}
body.gamepad #game #modal .commerce-stock>div{flex:1;flex-direction:column;align-items:flex-start;gap:4px}
body.gamepad #game #modal .commerce-stock strong{font-size:var(--ui-meta)}
body.gamepad #game #modal .commerce-button{padding:4px 10px}
body.gamepad #game #modal .commerce-footer-actions{gap:6px}
body.gamepad #game #modal .is-trade .commerce-detail{flex-basis:calc(44px * var(--inverse-ui-scale));height:calc(44px * var(--inverse-ui-scale));padding:calc(4px * var(--inverse-ui-scale)) 0}
body.gamepad #game #modal .is-trade .commerce-detail-art{width:calc(28px * var(--inverse-ui-scale));height:calc(28px * var(--inverse-ui-scale))}
body.gamepad #game #modal .is-trade .commerce-quantity label{display:none}