/* ================= BAG PANEL (I): a dark-fantasy grid docked right, over the agent journal =================
   Cells are coloured by rarity: the frame and a soft glow from the bottom take the colour in --c. */
#bag{position:absolute;right:16px;top:54px;width:340px;max-height:calc(100% - 300px);display:flex;z-index:4;
  background:linear-gradient(180deg,#151a24,#0b0e15);border:1px solid #3b3326;box-shadow:0 0 0 1px #000,0 10px 30px #000a,inset 0 1px 0 #ffffff10}
#bag[hidden]{display:none}
#bag .bgMain{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
#bag .bgHead{display:flex;align-items:center;gap:8px;padding:7px 9px;border-bottom:1px solid #3b3326;background:linear-gradient(180deg,#221d16,#14110d)}
#bag .bgHead b{font:600 15px/1 var(--f-display);color:#f0e3bb;letter-spacing:.03em}
#bag .bgHead span{font:600 12px/1 var(--f-ui);color:#a89a7c}
#bag .bgHead .grow{flex:1}
#bag .bgX{width:24px;height:24px;padding:0;background:#1c1812;border:1px solid #5a4c34;color:#f0e3bb;font:700 14px/1 var(--f-ui)}
#bag .bgX:hover{border-color:var(--ember2)}
#bag .bgGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:8px;overflow:auto;min-height:0;align-content:start;
  scrollbar-width:thin;scrollbar-color:#5a4c34 transparent}
#bag .bc{--c:#3a3f4c;position:relative;aspect-ratio:1;padding:0;border:1px solid color-mix(in srgb,var(--c) 70%,#000);
  background:radial-gradient(120% 90% at 50% 110%,color-mix(in srgb,var(--c) 38%,transparent),transparent 70%),linear-gradient(180deg,#1d212b,#10131a);
  box-shadow:inset 0 0 0 1px #000,inset 0 0 10px #0009}
#bag .bc.e{border-color:#262a33;background:linear-gradient(180deg,#14171e,#0d0f14);cursor:default}
#bag .bc:not(.e):hover{border-color:var(--c);box-shadow:inset 0 0 0 1px #000,0 0 8px color-mix(in srgb,var(--c) 55%,transparent)}
#bag .bc.sel{border-color:#f0e3bb;box-shadow:inset 0 0 0 1px #000,0 0 0 1px #f0e3bb,0 0 10px color-mix(in srgb,var(--c) 70%,transparent)}
#bag .bc canvas{position:absolute;inset:14%;width:72%;height:72%;image-rendering:pixelated}
#bag .bc .n{position:absolute;right:3px;bottom:1px;font:700 11px/1.2 var(--f-ui);color:#fff;text-shadow:1px 1px 0 #000,-1px 0 0 #000,0 -1px 0 #000}
#bag .bc .p{position:absolute;left:3px;top:1px;font:700 11px/1.2 var(--f-ui);color:var(--ember2);text-shadow:1px 1px 0 #000}
#bag .bc .w{position:absolute;right:3px;top:3px;width:6px;height:6px;background:var(--gold);box-shadow:0 0 0 1px #000}
#bag .bgSel{flex:0 0 auto;border-top:1px solid #3b3326;padding:8px 9px;font-size:12px;color:#a89a7c;background:#0f1218}
#bag .bgSel h4{margin:0 0 3px;font:600 13.5px/1.25 var(--f-ui)}
#bag .bgSel .acts{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
#bag .bgSel .btn{font-size:11.5px;padding:4px 7px;white-space:normal;text-align:left}
#bag .bgFoot{display:flex;flex-wrap:wrap;row-gap:6px;align-items:center;gap:10px;padding:7px 9px;border-top:1px solid #3b3326;background:linear-gradient(180deg,#14110d,#1c1812);font:700 13px/1 var(--f-ui)}
#bag .bgFoot .g{color:var(--gold);display:flex;align-items:center;gap:5px}
#bag .bgFoot .m{color:#7fd4ff;display:flex;align-items:center;gap:5px}
#bag .bgFoot .bb{display:flex;gap:4px;margin-left:auto}
#bag .bgFoot .btn{white-space:normal;font-size:11px;padding:4px 7px;background:#1c1812;border-color:#5a4c34}
#bag .bgTabs{flex:0 0 40px;display:flex;flex-direction:column;gap:2px;padding:6px 3px;border-left:1px solid #3b3326;background:linear-gradient(180deg,#1a1610,#0f0d0a)}
#bag .bgTabs button{height:38px;padding:0;background:transparent;border:1px solid transparent;color:#8a7d62;font:700 11px/1 var(--f-display)}
#bag .bgTabs button svg{width:20px;height:20px;display:block;margin:auto}
#bag .bgTabs button:hover{color:#f0e3bb}
#bag .bgTabs button.on{color:#f0e3bb;border-color:#5a4c34;background:#2a2318}
body.bagOpen #side{visibility:hidden}
@media (max-width:900px){
  #bag{left:16px;right:16px;width:auto;top:auto;bottom:230px;max-height:55%}
}