/* Shop Forge: the quartermaster in the same stone-and-brass language as the HUD Forge console.
   Loaded after hud-forge.css; presentation only. Ids, layout areas and behaviour stay unchanged.
   Item families reuse the HUD stat colours (data-family); tiers get brighter brass (data-tier). */
#shop.itemShop{
 --forge-corner-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f6e2a8'/%3E%3Cstop offset='.5' stop-color='%23c9a85f'/%3E%3Cstop offset='1' stop-color='%236e5a33'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M1 33V9l8-8h24' fill='none' stroke='%23050807' stroke-width='3.4'/%3E%3Cpath d='M1 33V9l8-8h24' fill='none' stroke='url(%23g)' stroke-width='1.7'/%3E%3Cpath d='M6 33V12l6-6h21' fill='none' stroke='url(%23g)' stroke-width='1' opacity='.7'/%3E%3Cpath d='M8 20c3-4 7-8 12-11' fill='none' stroke='%23f0d79a' stroke-width='.9' opacity='.75'/%3E%3Ccircle cx='9' cy='9' r='2' fill='%23f0d79a'/%3E%3C/svg%3E");
 --forge-corner-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f6e2a8'/%3E%3Cstop offset='.5' stop-color='%23c9a85f'/%3E%3Cstop offset='1' stop-color='%236e5a33'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(34 0) scale(-1 1)'%3E%3Cpath d='M1 33V9l8-8h24' fill='none' stroke='%23050807' stroke-width='3.4'/%3E%3Cpath d='M1 33V9l8-8h24' fill='none' stroke='url(%23g)' stroke-width='1.7'/%3E%3Cpath d='M6 33V12l6-6h21' fill='none' stroke='url(%23g)' stroke-width='1' opacity='.7'/%3E%3Cpath d='M8 20c3-4 7-8 12-11' fill='none' stroke='%23f0d79a' stroke-width='.9' opacity='.75'/%3E%3Ccircle cx='9' cy='9' r='2' fill='%23f0d79a'/%3E%3C/g%3E%3C/svg%3E");
 --forge-corner-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f6e2a8'/%3E%3Cstop offset='.5' stop-color='%23c9a85f'/%3E%3Cstop offset='1' stop-color='%236e5a33'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(0 34) scale(1 -1)'%3E%3Cpath d='M1 33V9l8-8h24' fill='none' stroke='%23050807' stroke-width='3.4'/%3E%3Cpath d='M1 33V9l8-8h24' fill='none' stroke='url(%23g)' stroke-width='1.7'/%3E%3Cpath d='M6 33V12l6-6h21' fill='none' stroke='url(%23g)' stroke-width='1' opacity='.7'/%3E%3Ccircle cx='9' cy='9' r='2' fill='%23f0d79a'/%3E%3C/g%3E%3C/svg%3E");
 --forge-corner-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f6e2a8'/%3E%3Cstop offset='.5' stop-color='%23c9a85f'/%3E%3Cstop offset='1' stop-color='%236e5a33'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(34 34) scale(-1 -1)'%3E%3Cpath d='M1 33V9l8-8h24' fill='none' stroke='%23050807' stroke-width='3.4'/%3E%3Cpath d='M1 33V9l8-8h24' fill='none' stroke='url(%23g)' stroke-width='1.7'/%3E%3Cpath d='M6 33V12l6-6h21' fill='none' stroke='url(%23g)' stroke-width='1' opacity='.7'/%3E%3Ccircle cx='9' cy='9' r='2' fill='%23f0d79a'/%3E%3C/g%3E%3C/svg%3E");
 border:0;border-radius:2px;color:var(--forge-ivory);isolation:isolate;
 background:radial-gradient(90% 60% at 50% 0,#2b3532 0,transparent 70%),linear-gradient(180deg,var(--forge-stone-hi),var(--forge-stone) 30%,var(--forge-stone-lo));
 box-shadow:inset 0 0 0 1px var(--forge-brass),inset 0 0 0 3px var(--forge-recess),inset 0 0 0 4px #9a7f4a99,0 0 0 1px #000,0 22px 60px #000c
}
#shop.itemShop::backdrop{background:radial-gradient(ellipse at 50% 50%,#0000004d,#000000a6)}
/* Corner brackets above every panel; no clip-path and no filter. */
#shop.itemShop::before{
 content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
 background:var(--forge-corner-a) left top/34px 34px no-repeat,var(--forge-corner-b) right top/34px 34px no-repeat,
  var(--forge-corner-c) left bottom/34px 34px no-repeat,var(--forge-corner-d) right bottom/34px 34px no-repeat,
  linear-gradient(90deg,transparent,#f0d79a66 20%,#f0d79aaa 50%,#f0d79a66 80%,transparent) top/100% 1px no-repeat
}
#shop *{scrollbar-width:thin;scrollbar-color:#6e5a33 #0a0e0d}

/* Header and tabs. */
#shop .shopHeader{background:linear-gradient(180deg,#222b28,#141a18);border-bottom:0;box-shadow:inset 0 -1px 0 #000,0 1px 0 #6e5a3399}
#shop .shopTabs button{color:#a99f86;letter-spacing:.12em;transition:color .12s}
#shop .shopTabs button:hover{color:var(--forge-ivory)}
#shop .shopTabs button[aria-selected=true]{color:#fff1c9;border-color:var(--forge-brass-hi);background:linear-gradient(0deg,#f0d79a26,transparent 75%);text-shadow:0 0 8px #f0cf7455}
#shop .shopMerchant{color:var(--forge-brass);letter-spacing:.2em}
#shop .shopHeader .close{color:var(--forge-brass);text-shadow:0 1px 0 #000}
#shop .shopHeader .close:hover{color:var(--forge-brass-hi)}

/* Essentials rail. */
#shop .quickItems{background:linear-gradient(90deg,#0a0f0e,#111816);border-right:1px solid #3a3424;box-shadow:inset -1px 0 0 #000}
#shop .quickLabel{color:var(--forge-brass);letter-spacing:.14em}
#shop .smallItem{color:#f1d98c;font-weight:700;text-shadow:0 1px 0 #000}

/* Every item picture sits in the same bevelled bezel as the HUD slots. */
#shop .smallItem img,#shop .recommendedItem>img,#shop .catalogItem>img,#shop #detailImage,#shop #detailRecipe img,#shop #shopInventory .slot{
 border:1px solid var(--forge-brass-lo);border-radius:3px;background-color:#080c0b;
 box-shadow:0 0 0 1px #000,0 3px 7px #000b,inset 0 0 0 1px #0009
}
#shop [data-tier="epic"]>img,#shop #shopInventory .slot[data-tier="epic"]{border-color:var(--forge-brass)}
#shop [data-tier="legendary"]>img,#shop #shopInventory .slot[data-tier="legendary"]{border-color:var(--forge-brass-hi);box-shadow:0 0 0 1px #000,0 0 0 2px #8a6a2c,0 0 12px #f0cf7455,0 3px 7px #000b}
#shop .smallItem:hover img,#shop .smallItem.selected img{border-color:var(--forge-brass-hi);box-shadow:0 0 0 1px #000,0 0 10px #f0cf7466}
#shop [data-family="damage"]{--fam:var(--stat-ad)}#shop [data-family="magic"]{--fam:var(--stat-ap)}#shop [data-family="defense"]{--fam:var(--stat-armor)}
#shop [data-family="sustain"]{--fam:var(--stat-hp)}#shop [data-family="movement"]{--fam:var(--stat-ms)}

/* Catalog tools. */
#shop .shopCatalog{background:radial-gradient(70% 50% at 50% 0,#ffffff08,transparent 70%)}
#shop .shopSearch{border:1px solid #4a4130;border-radius:2px;background:linear-gradient(180deg,#070a09,#0e1412);box-shadow:inset 0 2px 4px #000}
#shop .shopSearch:focus-within{outline:1px solid var(--forge-brass-hi);border-color:var(--forge-brass)}
#shop .shopSearch>span{color:var(--forge-brass)}
#shop .shopSearch input::placeholder{color:#8d8670}
#shop .shopSearch kbd,#shop .shopKeys kbd{padding:1px 4px;border:1px solid var(--forge-brass-lo);border-radius:2px;background:linear-gradient(#1c1f1a,#0a0c0a);color:var(--forge-brass-hi);font-weight:700}
#shop .shopTools .affordable{color:#bfb59a}
#shop .affordable input{accent-color:var(--forge-brass)}
#shop .shopSectionLabel h3,#shop .moreItems h3{color:var(--forge-brass-hi);letter-spacing:.16em;text-shadow:0 1px 0 #000}
#shop .shopSectionLabel h3::before,#shop .moreItems h3::before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 1px 1px;transform:rotate(45deg);background:var(--forge-brass);box-shadow:0 0 4px #f0cf7488}
#shop .shopSectionLabel>span{color:#a99f86}
#shop .statFilters button{border:1px solid transparent;border-radius:2px;color:#bfb59a}
#shop .statFilters button:hover{color:var(--forge-ivory);border-color:#4a4130}
#shop .statFilters button[aria-pressed=true]{color:#fff1c9;border-color:var(--forge-brass);background:linear-gradient(180deg,#3a3020,#1c1a12);box-shadow:inset 0 1px 0 #fff2}

/* Suggested cards and catalog tiles: raised stone plates, the family colour as a thin crest, brass when selected. */
#shop .recommendedItem,#shop .catalogItem{
 position:relative;border:1px solid #3a3424;border-radius:2px;color:#e5dbc0;
 background:linear-gradient(180deg,#202926,#141a18 55%,#0e1312);
 box-shadow:inset 0 1px 0 #ffffff12,inset 0 0 0 1px #000,0 3px 8px #0009;transition:border-color .12s,box-shadow .12s
}
#shop .recommendedItem::before,#shop .catalogItem::before{content:"";position:absolute;left:12%;right:12%;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--fam,var(--forge-brass)),transparent);opacity:.85;pointer-events:none}
#shop .recommendedItem:hover,#shop .catalogItem:hover{border-color:var(--forge-brass);background:linear-gradient(180deg,#27312e,#18201d 55%,#101614)}
#shop .recommendedItem.selected,#shop .catalogItem.selected{
 border-color:var(--forge-brass-hi);background:radial-gradient(90% 60% at 50% 30%,#f0d79a1c,transparent 70%),linear-gradient(180deg,#27312e,#151c1a);
 box-shadow:inset 0 0 0 1px #f0d79a55,inset 0 -3px 0 var(--forge-brass-hi),0 0 16px #f0cf7426,0 3px 8px #0009
}
#shop .recommendedName,#shop .catalogItem strong{color:#f6ead0;text-shadow:0 1px 0 #000}
#shop .itemCost,#shop .catalogItem b{color:#f3d77a;font-weight:700;text-shadow:0 1px 0 #000}
#shop .recommendedItem .itemCategory{border:1px solid color-mix(in srgb,var(--fam,var(--forge-brass)) 45%,transparent);border-radius:2px;background:color-mix(in srgb,var(--fam,var(--forge-brass)) 14%,#070a09);color:var(--fam,var(--forge-brass-hi));font-weight:700;letter-spacing:.12em}
#shop .recommendRule{color:var(--forge-brass)}
#shop .recommendRule:before{background:linear-gradient(90deg,transparent,var(--forge-brass-lo))}
#shop .recommendRule:after{background:linear-gradient(270deg,transparent,var(--forge-brass-lo))}
#shop .recommendedItem>strong{color:#eadfc0}
#shop .recommendHint,#shop .catalogItem small{color:#b3aa90}
#shop .recommendOwned,#shop .catalogItem .catalogOwned{color:#d9c48a;letter-spacing:.03em}
#shop #shopEmpty,#shop #recommendationsComplete{color:#bfb59a}

/* Detail panel: a recessed ledger with a warm display niche and a forged purchase button. */
#shop #itemDetail{border-left:1px solid #3a3424;background:linear-gradient(180deg,#121816,#0a0f0e);box-shadow:inset 1px 0 0 #000}
#shop .itemDisplay{background:radial-gradient(ellipse at 50% 62%,#f0cf741f,transparent 62%)}
#shop #detailCategory{color:var(--forge-brass);letter-spacing:.16em}
#shop #detailImage{border-color:var(--forge-brass);box-shadow:0 0 0 1px #000,0 0 0 3px #2a2416,0 0 0 4px var(--forge-brass-lo),0 6px 16px #000c}
#shop .itemDisplay small{color:#a99f86;letter-spacing:.14em}
#shop .detailCopy,#shop #detailRecipe{border-top:0;background:linear-gradient(90deg,transparent,#6e5a3399,transparent) top/100% 1px no-repeat}
#shop #detailName{color:#f6ead0;text-shadow:0 1px 0 #000}
#shop #detailPurpose,#shop .itemRules,#shop #detailOwned{color:#b3aa90}
#shop #detailRecipe>span{color:var(--forge-brass);letter-spacing:.14em}
#shop #detailRecipe button{border:1px solid #3a3424;border-radius:2px;background:linear-gradient(180deg,#1c2421,#111715);color:#e5dbc0}
#shop #detailRecipe button:hover{border-color:var(--forge-brass);background:linear-gradient(180deg,#252f2b,#151c1a)}
#shop #purchaseReason{color:#e7c98a}
#shop #purchaseItem{
 border:1px solid #f6e2a8;border-radius:2px;color:#1d1405;font-weight:800;letter-spacing:.14em;text-shadow:0 1px 0 #fff6;
 background:linear-gradient(180deg,#f3d88c,#d4a650 45%,#a77a2e 75%,#8a6224);
 box-shadow:0 0 0 1px #000,0 0 14px #f0cf7444,inset 0 1px 0 #fff9,inset 0 -2px 0 #0000004d
}
#shop #purchaseItem:hover:not(:disabled){border-color:#fff3c8;background:linear-gradient(180deg,#fae6a8,#e0b660 45%,#b88935 75%,#956a28);box-shadow:0 0 0 1px #000,0 0 20px #f0cf7477,inset 0 1px 0 #fffb,inset 0 -2px 0 #0000004d}
#shop #purchaseItem:disabled{border-color:#4a4130;background:linear-gradient(180deg,#1c2220,#121715);color:#8d8670;text-shadow:none;box-shadow:0 0 0 1px #000,inset 0 1px 0 #ffffff0d}
#shop #sellItem{border:1px solid var(--forge-brass-lo);border-radius:2px;background:linear-gradient(180deg,#1f2421,#121614);color:#e7d9ab;letter-spacing:.12em}
#shop #sellItem:hover:not(:disabled){border-color:var(--forge-brass);background:linear-gradient(180deg,#2c2a20,#171711)}

/* Footer: equipment bezels and the same coin plaque as the HUD. */
#shop .shopFooter{background:linear-gradient(180deg,#1d2523,#101614);border-top:0;box-shadow:inset 0 1px 0 #000,0 -1px 0 #6e5a3399}
#shop #shopInventory .slot:hover{border-color:var(--forge-brass-hi)}
#shop #shopInventory .emptySlot{border-color:#2b2a22;background:linear-gradient(#070a09,#101614);box-shadow:0 0 0 1px #000,inset 0 2px 4px #000}
#shop #shopInventory [aria-pressed=true]{border-color:var(--forge-brass-hi);outline:1px solid var(--forge-brass-hi)}
#shop #shopSlots{color:#a99f86}
#shop .shopBalance{align-items:center}
#shop .shopBalance>span:first-child{width:22px;height:17px;font-size:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='20' viewBox='0 0 26 20'%3E%3Cdefs%3E%3CradialGradient id='c' cx='.38' cy='.32' r='.75'%3E%3Cstop offset='0' stop-color='%23fff4c7'/%3E%3Cstop offset='.35' stop-color='%23f3c95c'/%3E%3Cstop offset='.8' stop-color='%23b5801f'/%3E%3Cstop offset='1' stop-color='%236b4a10'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='17' cy='11' r='7.5' fill='url(%23c)' stroke='%234a3206' stroke-width='1'/%3E%3Ccircle cx='17' cy='11' r='5' fill='none' stroke='%23fff2b8' stroke-opacity='.45' stroke-width='.8'/%3E%3Ccircle cx='9' cy='9' r='8' fill='url(%23c)' stroke='%234a3206' stroke-width='1'/%3E%3Ccircle cx='9' cy='9' r='5.4' fill='none' stroke='%23fff2b8' stroke-opacity='.5' stroke-width='.8'/%3E%3Cpath d='M6 6.5q3-2 6 0' fill='none' stroke='%23fffbe6' stroke-opacity='.7' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat}
#shop .shopBalance strong{color:#f3e3a6;font-weight:800;text-shadow:0 1px 0 #000,0 0 6px #ffcf6a40}
#shop .shopBalance>span:last-child{color:var(--forge-brass);letter-spacing:.14em}
#shop .shopKeys{color:#a99f86}
#shop.itemShop #shopStatus{border-top:1px solid #2b2a22;background:linear-gradient(180deg,#0a0f0e,#070a09);color:#b3aa90}

/* Legendary marker: a small cut brass gem instead of the old boxed glyph. */
#shop [data-upgrade-item]::after{content:"";right:8px;top:8px;width:8px;height:8px;padding:0;border:1px solid #000;transform:rotate(45deg);background:linear-gradient(135deg,#fff3c8,#c9a85f 55%,#6e5a33);box-shadow:0 0 6px #f0cf7488}
#shop #shopInventory .slot[data-upgrade-item]::after{right:3px;top:3px;width:6px;height:6px}
#shop #shopInventory .emptySlot{border-color:#3d3524}