/* Loot Chest panels (public/mdrop_ui.js). Art reused from the game: /ui/soc_rm_*.webp (panel 3-slice), /ui/chain.webp (character_chain.tga of the original client, rotated) /ui/status/blank_*.webp (plate button), /ui/soc_slot.webp (item slot),
   /ui/stats_bars.png (gold bar row), item tooltip colours of #socTip. Nothing new is drawn. */
#tDrop { position:absolute; left:190px; top:16px; width:30px; height:26px; box-sizing:border-box; display:none; align-items:center; justify-content:center; padding:0; margin:0; color:#e0b85a; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  -webkit-appearance:none; appearance:none; background:transparent none; background-color:transparent; box-shadow:none; outline:none; text-shadow:none; border-radius:0; -webkit-user-select:none; user-select:none;
  border:solid transparent; border-width:8px; border-image:url(/ui/status/blank_0.webp) 8 fill / 8px stretch; filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)); pointer-events:auto; }
#tDrop::after { content:""; position:absolute; inset:-16px -10px; } /* tap area: at least 44 css px at the smallest HUD scale */
#tDrop:focus, #tDrop:focus-visible, #tDrop:hover, #tDrop:active, #tDrop.on { background:transparent none; background-color:transparent; outline:none; box-shadow:none; }
#tDrop svg { display:block; flex:none; }
#tDrop.on { border-image-source:url(/ui/status/blank_2.webp); color:#ffe08a; }
@media (hover:hover) { #tDrop:hover { border-image-source:url(/ui/status/blank_1.webp); color:#ffe08a; } }
#tDrop:active { border-image-source:url(/ui/status/blank_3.webp); }

#mdRoot { --f:Arial,"Liberation Sans",Helvetica,sans-serif; position:fixed; z-index:340; display:none; align-items:stretch; width:calc(var(--lw) + var(--gap) + var(--rw)); height:var(--lh); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:manipulation; font-family:var(--f); color:#e0a64a; filter:drop-shadow(0 4px 10px rgba(0,0,0,.7)); }
#mdRoot.on { display:flex; }
#mdRoot .mdP { position:relative; z-index:2; display:flex; flex-direction:column; min-height:0; }
#mdL { width:var(--lw); flex:none; align-self:flex-start; max-height:100%; } #mdR { width:var(--rw); flex:none; margin-left:var(--gap); }
#mdRoot .rmT, #mdRoot .rmM, #mdRoot .rmB { border-style:solid; border-width:0 4px; box-sizing:border-box; flex:none; } /* RightMenu_Top / Back / Bottom art, as the player menu */
#mdRoot .rmT { height:10px; border-image:url(/ui/soc_rm_top.webp) 0 4 0 4 fill / 0 4px 0 4px stretch; }
#mdRoot .rmM { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:0 3px; border-image:url(/ui/soc_rm_back.webp) 0 4 0 4 fill / 0 4px 0 4px stretch; margin:-1px 0; }
#mdRoot .rmB { height:10px; border-image:url(/ui/soc_rm_bottom.webp) 0 4 0 4 fill / 0 4px 0 4px stretch; }
#mdRoot .mdCh { position:absolute; z-index:1; left:calc(var(--lw) - 5px); width:calc(var(--gap) + 10px); height:12px; background:url(/ui/chain.webp) 0 0/auto 100% repeat-x; filter:brightness(1.5) contrast(1.1) drop-shadow(0 1px 1px rgba(0,0,0,.9)); }
#mdRoot .mdCh.c1 { top:18px; } #mdRoot .mdCh.c2 { top:max(40px, calc(var(--lt, 110px) - 30px)); }
/* the plates: the same iron plate (ui/plate_0..2.webp, 9-sliced) and gold Arial lettering as the Teleport list and ADMIN */
#mdRoot .mdRow, #mdRoot .mdPg button { box-sizing:border-box; border:solid transparent; border-width:var(--pw); border-image:url(/ui/plate_0.webp) 14 fill / var(--pw) stretch; background:none; font:700 10px/1 var(--f); letter-spacing:.03em; text-transform:uppercase; color:#e0a64a; text-shadow:0 1px 1px #000, 0 0 3px rgba(0,0,0,.8); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
@media (hover:hover) { #mdRoot .mdRow:hover, #mdRoot .mdPg button:hover:not(:disabled) { border-image-source:url(/ui/plate_1.webp); color:#ff7d12; } }
#mdRoot .mdRow.sel { color:#fff0b0; filter:drop-shadow(0 0 1px #ffd36b) drop-shadow(0 0 2px #ffd36b) drop-shadow(0 0 4px rgba(255,170,50,.8)); }
#mdRoot .mdRow:active, #mdRoot .mdRow.sel, #mdRoot .mdPg button:active:not(:disabled) { border-image-source:url(/ui/plate_2.webp); }
html.dint #mdRoot .mdRow, html.dint #mdRoot .mdPg button { image-rendering:pixelated; }
/* left: the Loot Chests */
#mdRoot .mdRows { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; margin-top:-4px; display:flex; flex-direction:column; gap:2px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#8d6c34 #0b0907; }
#mdRoot .mdRows::-webkit-scrollbar { width:4px; } #mdRoot .mdRows::-webkit-scrollbar-thumb { background:#8d6c34; border-radius:2px; }
#mdRoot .mdRow { position:relative; flex:none; display:flex; align-items:center; gap:4px; width:100%; height:calc(var(--pw) * 2 + 16px); margin:0; padding:0 0 4px; text-align:left; }
#mdRoot .mdRn { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mdRoot .mdRp { flex:none; font-style:normal; font-variant-numeric:tabular-nums; color:#ffd36b; }
#mdRoot .mdRb { position:absolute; left:calc(var(--pw) - 2px); right:calc(var(--pw) - 2px); bottom:2px; height:2px; background:#070605; box-shadow:0 0 0 1px #3a2f18; overflow:hidden; pointer-events:none; }
#mdRoot .mdRb u { display:block; height:100%; background:url(/ui/stats_bars.png) 0 66.667%/100% 400% no-repeat; text-decoration:none; }
#mdRoot .mdHelp { flex:none; margin:2px 0 0; padding:3px 2px 1px; border-top:1px solid #3a3020; font:700 8.5px/10px var(--f); letter-spacing:.04em; color:#bfb08a; text-align:center; text-shadow:0 1px 2px #000; }
#mdRoot .mdMsg { padding:14px 6px; text-align:center; font:700 11px var(--f); color:#9c9482; }
/* right: the items of the chosen chest, paged */
#mdRoot .mdHd { flex:none; display:flex; align-items:center; gap:4px; height:24px; margin:-4px 0 0; border-bottom:1px solid rgba(217,180,90,.22); }
#mdRoot .mdHd b { flex:1; min-width:0; font:700 11px/24px var(--f); letter-spacing:.04em; text-transform:uppercase; color:#e0a64a; text-shadow:0 1px 1px #000, 0 0 3px rgba(0,0,0,.8); white-space:nowrap; padding-left:3px; }
#mdRoot .mdHd em { flex:none; font:700 11px var(--f); font-style:normal; color:#ffd36b; text-shadow:0 1px 2px #000; }
#mdRoot .mdX { position:relative; flex:none; width:24px; height:24px; margin:0 -2px 0 0; padding:0; border:0; background:none; font:400 20px/24px var(--f); color:#d8cfb8; text-shadow:0 1px 2px #000; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
#mdRoot .mdX::after { content:""; position:absolute; inset:-10px -6px; } /* tap area >= 44 css px */
#mdRoot .mdX:hover { color:#ffe08a; } #mdRoot .mdX:active { color:#ff7d12; }
#mdRoot .mdLines { flex:none; overflow:hidden; padding-top:2px; }
#mdRoot .mdIt { display:flex; align-items:center; gap:4px; height:22px; padding:0 2px; cursor:help; -webkit-tap-highlight-color:transparent; }
#mdRoot .mdIt img { flex:none; width:18px; height:18px; object-fit:contain; background:url(/ui/soc_slot.webp) 0 0/100% 100% no-repeat; padding:1px; box-sizing:border-box; filter:drop-shadow(0 1px 1px #000); -webkit-user-drag:none; pointer-events:none; }
#mdRoot .mdIt .mdQ { flex:none; width:18px; height:18px; font:700 11px/18px var(--f); text-align:center; color:#6e624c; }
#mdRoot .mdNm { min-width:0; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:700 11px var(--f); color:#ececec; text-shadow:0 1px 2px #000; pointer-events:none; }
#mdRoot .mdIt:hover { background:rgba(215,170,80,.16); }
#mdRoot .mdPg { flex:none; display:flex; align-items:center; justify-content:center; gap:6px; height:30px; margin-top:auto; border-top:1px solid rgba(217,180,90,.22); }
#mdRoot .mdPg span { min-width:36px; text-align:center; font:700 11px/30px var(--f); letter-spacing:.06em; color:#e0a64a; text-shadow:0 1px 1px #000; cursor:pointer; }
#mdRoot .mdPg button { position:relative; width:28px; height:calc(var(--pw) * 2 + 9px); padding:0 0 2px; display:flex; align-items:center; justify-content:center; font:700 15px/1 var(--f); }
#mdRoot .mdPg button::after { content:""; position:absolute; inset:-10px -6px; } /* tap area >= 44 css px */
#mdRoot .mdPg button:disabled { opacity:.45; cursor:default; }

#mdTip { position:fixed; display:none; z-index:365; width:240px; box-sizing:border-box; padding:8px 10px; background:rgba(10,8,6,.97); border:1px solid #b79553; border-radius:3px; box-shadow:0 0 0 1px #000, 0 10px 34px #000; font:11.5px/1.36 system-ui,'Segoe UI',Arial,sans-serif; color:#eee; pointer-events:none; }
#mdTip.on { display:block; }
#mdTip .tpH { display:flex; align-items:center; gap:8px; margin-bottom:5px; padding-bottom:6px; border-bottom:1px solid #3a3020; } #mdTip .tpH img { width:42px; height:42px; object-fit:contain; flex:none; } #mdTip .tpH b { font-size:14px; }
#mdTip .g { color:#7be36a; } #mdTip .w { color:#ececec; } #mdTip .o { color:#ff9b2f; font-weight:600; } #mdTip .r { color:#ff5a4a; } #mdTip .tgap { margin-top:6px; }
#mdTip .gems { display:flex; gap:8px; margin-top:8px; } #mdTip .gems i { width:24px; height:24px; border-radius:2px; border:2px solid #8d6c34; background:linear-gradient(135deg,#17140f,#050403); box-shadow:inset 0 2px 4px #000, 0 0 0 1px #2a2013; }