/* Deeper loot: sockets, materials pouch, Ember Forge page and set, socket and gem tooltip lines. Linked after ui-housing.css. */
/* Deeper loot: set and power items, sockets, the materials pouch and Borin's Ember Forge. */
.gi.q-set, .slot.q-set { background: rgba(40,150,80,.26); }
.cw-gear-slot.q-set { border-color: rgba(88,196,120,.8); }
.gi .sockets, .cw-gear-slot .sockets, .forge-slot .sockets { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; gap: 3px; pointer-events: none; }
.sockets.two { padding: 0 18%; }
.sock { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #050403 45%, #2a2118 75%); box-shadow: 0 0 0 1px rgba(210,170,100,.55), 0 1px 2px #000; opacity: .82; }
.sock.full { opacity: 1; background: radial-gradient(circle at 38% 34%, var(--gem-hi) 0 18%, var(--gem) 48%, #140806 100%); box-shadow: 0 0 0 1px rgba(255,236,190,.7), 0 0 6px var(--gem); }
.backpack-grid .sock, .cw-gear-slot .sock, .forge-slot .sock { width: 15px; height: 15px; }
.grid:not(.backpack-grid) .sock { width: 7px; height: 7px; }
.gi.forge-target { outline: 2px solid #ff9a3c; outline-offset: -2px; box-shadow: inset 0 0 16px rgba(255,140,50,.55); }
.pouch { display: flex; justify-content: center; gap: 10px; }
.mat { display: inline-flex; align-items: center; gap: 5px; min-width: 96px; padding: 3px 10px 3px 4px; border: 1px solid rgba(168,122,59,.55); background: linear-gradient(#2a1d12, #150e09); font-variant-numeric: tabular-nums; cursor: default; }
.mat img { width: 28px; height: 28px; }
.mat b { color: #ffe1a0; font-size: 17px; }
.mat small { color: #b7ac95; font-size: 13px; }
.vendor-tabs.three { gap: 5px; margin: 12px 0; }
.vendor-tabs.three button { min-width: 0; padding: 2px 4px; border-image-width: 12px 16px; font-size: 15px; line-height: 1.1; }
.vendor-tabs button small { display: block; font-size: 12px; color: #d8c5a0; }
.junk-actions.two { gap: 8px; }
.junk-actions.two button { flex: 1; }
.junk-summary { margin: 8px 0 0; color: #d8c5a0; font-size: 15px; font-variant-numeric: tabular-nums; }
.salvage-undo { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.salvage-undo button { margin: 0; min-height: 44px; font: 15px Georgia, serif; flex: none; }
.salvage-undo span { color: #b7ac95; font-size: 14px; line-height: 1.25; }
.junk-confirm.salvage { border-color: #c0602c; background: #33190f; }
.forge { display: flex; flex-direction: column; gap: 8px; }
body.character-paired #panelL.forge-page, body.single-panel #panelL.forge-page { display: flex; flex-direction: column; overflow: hidden; }
/* (desktop: the inner .panel-scroll takes the column and the clipping, so the close medallion stands on the frame: ui-windows.css) */
body:not(.mobile) #panelL.forge-page > .panel-scroll { display: flex; flex-direction: column; overflow: hidden; }
body:not(.mobile).character-paired #panelL.forge-page, body:not(.mobile).single-panel #panelL.forge-page { overflow: visible; }
#panelL.forge-page .forge { flex: 1; min-height: 0; }
#panelL.forge-page .forge-recipes { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #98703c #1b130b; }
.forge-pouch .mat { min-width: 0; flex: 1; padding-right: 6px; }
.forge-anvil { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid rgba(168,122,59,.45); background: radial-gradient(ellipse at 20% 50%, rgba(255,120,40,.16), transparent 60%), rgba(10,7,4,.55); }
.forge-slot { position: relative; flex: none; width: 78px; height: 78px; display: grid; place-items: center; border: 2px solid rgba(214,150,70,.85); background: radial-gradient(circle at 50% 60%, rgba(255,120,40,.22), rgba(4,3,3,.85) 70%); box-shadow: inset 0 0 18px #000, 0 0 12px rgba(255,120,40,.25); cursor: pointer; }
.forge-slot span { color: #8c7658; font: 13px Cinzel, Georgia, serif; }
/* The anvil shows any item whole, scaled to fit the square (owner, 2026-09-26: "items fit into anvil slot"). In the grid slot a
   percentage max-height did not hold, so a tall blade (1x3) ran out of the box; placed absolutely, the percentages resolve
   against the 78 px slot. */
.forge-slot img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; pointer-events: none; }
.forge-slot.has { border-color: #ffb45c; }
.forge-slot .qty { right: 4px; bottom: 2px; }
.forge-target { min-width: 0; flex: 1; line-height: 1.25; }
.forge-target p { margin: 0; color: #b7ac95; font-size: 14px; }
.forge-name { font: 600 16px Georgia, serif; overflow-wrap: anywhere; }
.forge-target small { display: block; margin: 3px 0 6px; color: #a99b82; font-size: 13px; }
.forge-target button { margin: 0; min-height: 34px; font: 13px Georgia, serif; }
.forge-notice { margin: 0; padding: 6px 10px; border-left: 3px solid #ff9a3c; background: rgba(60,30,12,.6); color: #ffd9a0; font-size: 14px; line-height: 1.3; }
.forge-recipes { display: flex; flex-direction: column; gap: 6px; }
.forge-recipe { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid rgba(168,122,59,.35); background: rgba(24,16,10,.72); }
.forge-recipe.off { opacity: .78; }
.fr-text { flex: 1; min-width: 0; }
.fr-text h4 { margin: 0; color: #f0cf88; font: 700 14px Cinzel, Georgia, serif; }
.fr-text p { margin: 2px 0 3px; color: #c9bba0; font-size: 13.5px; line-height: 1.25; }
.fr-cost { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; font-variant-numeric: tabular-nums; color: #ffe1a0; }
.fr-cost .c { display: inline-flex; align-items: center; gap: 2px; }
.fr-cost .c img { width: 20px; height: 20px; }
.fr-cost .c.short { color: #ff7f6e; }
.fr-cost .c.gold { color: #f0d890; }
.fr-cost em { color: #d99a7a; font-style: normal; font-size: 13px; }
.forge-recipe > button, .fr-confirm button { flex: none; margin: 0; min-height: 44px; min-width: 76px; font: 14px Georgia, serif; }
.forge-recipe > button:disabled, .forge-junk button:disabled, .salvage-undo button:disabled { opacity: .45; cursor: default; }
.fr-confirm { display: flex; flex-direction: column; gap: 4px; }
.forge-affixes { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 5px; }
#panelL .forge-affixes button { margin: 0; min-height: 0 !important; padding: 3px 7px !important; border: 1px solid rgba(168,122,59,.6) !important; border-image: none !important; background: #20160d !important; color: #9fb0ff; font: 13px Georgia, serif; text-shadow: none; }
#panelL .forge-affixes button[aria-pressed="true"] { border-color: #ffb45c !important; background: #4a2c12 !important; color: #fff; box-shadow: 0 0 6px rgba(255,160,70,.5); }
.forge-intro { margin: 0; padding: 0 0 0 16px; color: #c9bba0; font-size: 13.5px; line-height: 1.3; }
.forge-intro li { margin: 0 0 5px; }
.forge-intro b { color: #f0cf88; font: 700 13px Cinzel, Georgia, serif; }
.forge-empty { margin: 4px 0; color: #b7ac95; font-size: 14px; }
.forge-junk { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid rgba(168,122,59,.35); }
.forge-junk > div { display: flex; gap: 8px; }
.forge-junk button { flex: 1; margin: 0; min-height: 42px; font: 15px Georgia, serif; }
.forge-junk small { color: #c9bba0; font-size: 13px; line-height: 1.25; font-variant-numeric: tabular-nums; }
/* Item tooltips: sets, sockets, gems and powers. */
.tt-set { margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(72,200,120,.35); }
.tt-set-name { color: #48c878; font: 700 14px Cinzel, Georgia, serif; }
.tt-set-name span { color: #7fa88c; font: 12.5px Georgia, serif; }
.tt-set-piece { color: #7a7a72; }
.tt-set-piece.on { color: #6bff9a; }
.tt-set-piece.have { color: #3f9e62; }
.tt-set-piece small { font-size: 12px; }
.tt-set-bonus { color: #6a6a64; font-size: 14px; }
.tt-set-bonus b { font: 700 12px Cinzel, Georgia, serif; }
.tt-set-bonus.on { color: #48c878; }
.tt-power { margin-top: 6px; font-style: italic; }
.tt-sockets { margin-top: 6px; }
.tt-socket { color: #9fb0ff; }
.tt-socket::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; background: var(--gem, #111); box-shadow: 0 0 0 1px rgba(255,236,190,.6); }
.tt-socket.empty { color: #8a8a82; }
.tt-socket.empty::before { background: #050403; }
.tt-gem { margin: 4px 0; text-align: left; }
.tt-gem div { color: #9fb0ff; }
.tt-gem span { display: inline-block; min-width: 118px; color: #c9bba0; }