/* items – website Player Info + Admin Panel Player Inspector
   name colours like the game: Normal white · Magic blue · Noble light blue · Divine Noble yellow */
:root{ --g-normal:#f1edf9; --g-magic:#4d8dff; --g-noble:#8fc8ff; --g-divine:#ffd84a; --g-legend:#4be36a; --g-epic:#c77dff; }

/* ===== equipment window (like the game) ===== */
.ob-doll{ --u:1; display:flex; flex-direction:column; align-items:center; gap:0; width:max-content; max-width:100%; margin:0 auto; }
.ob-doll-tabs{ display:flex; gap:2px; align-self:stretch; background:#0c0a12; padding:4px 4px 0; border:1px solid #3a3326; border-bottom:0; border-radius:10px 10px 0 0; }
.ob-doll-tabs button{ flex:0 0 auto; min-width:calc(96px*var(--u)); border:1px solid #2b2620; border-bottom:0; border-radius:6px 6px 0 0; background:linear-gradient(180deg,#26221c,#16130f); color:#9d958a; font:600 calc(13px*var(--u)) Tahoma,'Segoe UI',sans-serif; padding:7px 12px; cursor:pointer; }
.ob-doll-tabs button.on{ background:linear-gradient(180deg,#6f6555,#3b352b); color:#fff; border-color:#a08a5a; }
.ob-doll-tabs button:focus-visible{ outline:2px solid #ffd98a; outline-offset:-2px; }
.ob-doll-in{ display:none; padding:calc(14px*var(--u)); gap:calc(8px*var(--u)); background:linear-gradient(180deg,#2a2722,#1c1a17); border:1px solid #3a3326; border-radius:0 0 12px 12px; box-shadow:0 20px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  grid-template-columns:calc(70px*var(--u)) calc(44px*var(--u)) calc(70px*var(--u)) calc(44px*var(--u)) calc(70px*var(--u));
  grid-template-rows:repeat(7,calc(36px*var(--u)));
  /* same places as the in-game Equip window */
  grid-template-areas:"pet wings helmet armlet armlet2" "weapon earring helmet earring2 shield" "weapon . armor . shield" "weapon . armor . shield" "gloves ring pants necklace2 boots" "gloves necklace pants ring2 boots" "amulet amulet belt amulet2 amulet2"; }
.ob-doll[data-view="gear"][data-set="1"] .ob-set1, .ob-doll[data-view="gear"][data-set="2"] .ob-set2{ display:grid; }
.ob-set2{ grid-template-areas:". earring helmet earring2 ." ". armlet helmet armlet2 ." ". . armor . ." ". . armor . ." "gloves ring pants necklace2 boots" "gloves necklace pants ring2 boots" "amulet amulet belt amulet2 amulet2"; }
.ob-doll[data-view="costume"] .ob-doll-cos{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; min-width:calc(340px*var(--u)); min-height:calc(260px*var(--u)); }
.ob-area{ position:relative; display:flex; }
.ob-area > .ob-slot{ width:100%; height:100%; }
.a-pet{grid-area:pet} .a-wings{grid-area:wings} .a-helmet{grid-area:helmet} .a-earring{grid-area:earring} .a-earring2{grid-area:earring2}
.a-weapon{grid-area:weapon} .a-necklace{grid-area:necklace} .a-armor{grid-area:armor} .a-shield{grid-area:shield}
.a-gloves{grid-area:gloves} .a-ring{grid-area:ring} .a-charm{grid-area:charm} .a-pants{grid-area:pants} .a-ring2{grid-area:ring2} .a-ring3{grid-area:ring3} .a-ring4{grid-area:ring4} .a-amulet{grid-area:amulet} .a-boots{grid-area:boots}
.a-armlet{grid-area:armlet; justify-content:flex-end} .a-belt{grid-area:belt} .a-armlet2{grid-area:armlet2}
.a-armlet > .ob-slot, .a-armlet2 > .ob-slot{ width:calc(40px*var(--u)); }  .a-belt > .ob-slot{ width:100%; }
.a-costume{ width:calc(96px*var(--u)); height:calc(130px*var(--u)); }
.ob-doll[data-wp="1"] .ob-w2, .ob-doll[data-wp="2"] .ob-w1{ display:none; }
.ob-wsw{ position:absolute; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; z-index:2; }
.a-weapon .ob-wsw{ right:calc(-11px*var(--u)); } .a-shield .ob-wsw{ left:calc(-11px*var(--u)); }
.ob-wsw button{ width:calc(18px*var(--u)); height:calc(24px*var(--u)); padding:0; border:1px solid #5a4d3c; background:#3b2a2a; color:#8f8273; font:700 calc(11px*var(--u)) Georgia,serif; cursor:pointer; }
.ob-wsw button.on{ background:#6b4a4a; color:#fff; }
.ob-doll-extra{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:12px; }
.ob-doll-extra .ob-slot{ width:calc(60px*var(--u)); height:calc(60px*var(--u)); }

.ob-slot{ position:relative; width:calc(60px*var(--u)); height:calc(60px*var(--u)); border-radius:5px; display:grid; place-items:center; padding:3px; cursor:pointer; color:#ece6f7;
  background:linear-gradient(180deg,#4a463f,#34312c); border:1px solid #57524a; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 6px rgba(0,0,0,.35); transition:filter .12s; }
.ob-slot i{ font-size:calc(17px*var(--u)); color:#d8cdb8; filter:drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.ob-slot img{ max-width:92%; max-height:92%; }
.ob-slot span{ position:absolute; left:0; right:0; bottom:2px; font-size:calc(6.5px*var(--u)); letter-spacing:.02em; text-transform:uppercase; color:#8d867b; text-align:center; white-space:nowrap; overflow:hidden; }
.ob-slot b{ position:absolute; top:2px; right:4px; font:800 calc(11px*var(--u)) Tahoma,sans-serif; color:#ffd98a; text-shadow:0 1px 2px #000; }
.ob-slot u{ position:absolute; top:4px; left:4px; display:flex; gap:2px; text-decoration:none; }
.ob-slot u s{ width:5px; height:5px; border-radius:50%; background:#c9b8ff; box-shadow:0 0 4px #9f7bff; }
.ob-slot:hover{ filter:brightness(1.15); }
.ob-slot:focus-visible{ outline:2px solid #ffd98a; outline-offset:1px; }
.ob-slot.is-empty{ cursor:default; opacity:.55; } .ob-slot.is-empty:hover{ filter:none; }
.ob-slot.is-empty span{ top:50%; bottom:auto; transform:translateY(-50%); color:#5d584f; }
.ob-slot:not(.is-empty) span{ display:none; } /* the game shows only the item, no text */
.ob-slot.g-magic{ border-color:var(--g-magic); box-shadow:inset 0 -2px 6px rgba(0,0,0,.35), 0 0 8px rgba(77,141,255,.45); }
.ob-slot.g-noble{ border-color:var(--g-noble); box-shadow:inset 0 -2px 6px rgba(0,0,0,.35), 0 0 10px rgba(143,200,255,.5); }
.ob-slot.g-divine{ border-color:var(--g-divine); box-shadow:inset 0 -2px 6px rgba(0,0,0,.35), 0 0 12px rgba(255,216,74,.55); }
@media (max-width:480px){ .ob-doll{ --u:.9; } }
@media (max-width:380px){ .ob-doll{ --u:.8; } }

/* ===== inventory / stash grid (like the game bag) ===== */
.ob-armory-bag{ margin-top:18px; overflow-x:auto; }
.ob-armory-bag .ob-invwrap{ width:max-content; min-width:100%; }
.ob-invtabs{ display:flex; align-items:center; gap:2px; margin-bottom:4px; max-width:560px; } .ob-invtabs b{ margin-right:auto; color:#fff; font:700 15px Tahoma,sans-serif; }
.ob-invtabs button{ min-width:90px; border:1px solid #2b2620; background:linear-gradient(180deg,#26221c,#16130f); color:#9d958a; font:700 14px Georgia,serif; padding:5px 10px; cursor:pointer; }
.ob-invtabs button.on{ background:linear-gradient(180deg,#6f6555,#3b352b); color:#fff; border-color:#a08a5a; }
.ob-inv{ display:grid; grid-template-columns:repeat(var(--cols,10),minmax(0,1fr)); max-width:560px; gap:2px; padding:6px; border-radius:6px; background:#151412; border:1px solid #3a3326; }
.ob-inv[hidden]{ display:none; }
.ob-inv .ob-cell{ width:100%; height:auto; aspect-ratio:1; border-radius:3px; padding:2px; background:linear-gradient(180deg,#2a2826,#1d1c1a); border-color:#33302b; }
.ob-inv .ob-cell i{ font-size:18px; } .ob-inv .ob-cell b{ font-size:10px; top:1px; right:3px; } .ob-inv .ob-cell span{ font-size:9px; bottom:1px; text-transform:none; color:#fff; text-shadow:0 1px 2px #000; }
.ob-inv .ob-cell.is-empty{ opacity:.3; }
@media (max-width:600px){ .ob-inv{ grid-template-columns:repeat(var(--cols,10),minmax(0,1fr)); } }

/* item names in lists */
.ob-iname{ font-weight:600; color:var(--g-normal); } .ob-iname.g-magic{ color:var(--g-magic); } .ob-iname.g-noble{ color:var(--g-noble); } .ob-iname.g-divine{ color:var(--g-divine); }
.ob-opt{ color:#7fb2ff; font-size:13px; }

/* ===== tooltip like the game ===== */
.ob-itempop{ position:fixed; inset:0; z-index:3000; display:grid; place-items:center; padding:16px; background:rgba(5,3,10,.65); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.ob-itempop[hidden]{ display:none; }
.ob-itempop-box{ position:relative; width:min(340px,100%); border-radius:8px; padding:14px 16px; background:rgba(8,6,14,.94); border:1px solid #6d5a33; box-shadow:0 0 0 1px #000, 0 20px 50px rgba(0,0,0,.7); color:#e8e2f4; font:13.5px/1.5 Tahoma,'Segoe UI',Arial,sans-serif; }
.ob-itempop-x{ position:absolute; top:4px; right:8px; background:none; border:0; color:#9a90b3; font-size:24px; line-height:1; cursor:pointer; }
.ob-tt-head{ display:flex; gap:12px; align-items:center; padding-bottom:10px; margin-bottom:8px; border-bottom:1px solid #2c2440; }
.ob-tt-pic{ width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; border-radius:6px; background:#000; border:1px solid #4a3d66; font-size:24px; color:#d8c8ff; }
.ob-tt-pic img{ max-width:100%; max-height:100%; }
.ob-tt-name{ margin:0; font:700 16px Tahoma,'Segoe UI',Arial,sans-serif; color:var(--g-normal); text-shadow:0 1px 2px #000; }
.g-magic .ob-tt-name{ color:var(--g-magic); } .g-noble .ob-tt-name{ color:var(--g-noble); } .g-divine .ob-tt-name{ color:var(--g-divine); }
.g-magic .ob-tt-pic{ border-color:var(--g-magic); } .g-noble .ob-tt-pic{ border-color:var(--g-noble); } .g-divine .ob-tt-pic{ border-color:var(--g-divine); }
.ob-tt-type{ font-size:12px; color:#a99fc4; } .ob-tt-grade{ color:inherit; font-weight:700; }
.g-magic .ob-tt-grade{ color:var(--g-magic); } .g-noble .ob-tt-grade{ color:var(--g-noble); } .g-divine .ob-tt-grade{ color:var(--g-divine); }
.g-legend .ob-tt-grade{ color:var(--g-legend); } .g-epic .ob-tt-grade{ color:var(--g-epic); }
.ob-tt-line{ color:#cfc8de; } .ob-tt-line b{ color:#fff; }
.ob-tt-sec{ margin:9px 0 3px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8d82a8; }
.ob-tt-opt{ color:#7fb2ff; } .ob-tt-bopt{ color:#e8e2f4; } .g-divine .ob-tt-opt{ color:#ffe27a; }
.ob-tt-socks{ display:flex; flex-direction:column; gap:3px; } .ob-tt-socks span{ color:#7d7397; } .ob-tt-socks span.full{ color:#e9b8ff; } .ob-tt-socks i{ width:18px; font-size:11px; }
.ob-tt-foot{ margin-top:10px; padding-top:7px; border-top:1px solid #2c2440; font-size:11px; color:#6f6690; }
.ob-tt-raw{ margin-top:8px; font-size:11px; color:#8d82a8; } .ob-tt-raw code{ display:block; white-space:pre-wrap; word-break:break-all; color:#c9b8ff; margin-top:4px; }

.ob-tt-gap{ height:8px; } .ob-tt-green{ color:#4be36a; } .ob-tt-red{ color:#ff5a3c; }

.ob-iname.g-legend, .g-legend .ob-tt-name, .g-legend .ob-tt-grade{ color:var(--g-legend); } .g-legend .ob-tt-pic{ border-color:var(--g-legend); }
.ob-iname.g-epic, .g-epic .ob-tt-name, .g-epic .ob-tt-grade{ color:var(--g-epic); } .g-epic .ob-tt-pic{ border-color:var(--g-epic); }
.ob-slot.g-legend{ border-color:var(--g-legend); box-shadow:inset 0 -2px 6px rgba(0,0,0,.35), 0 0 12px rgba(75,227,106,.5); }
.ob-slot.g-epic{ border-color:var(--g-epic); box-shadow:inset 0 -2px 6px rgba(0,0,0,.35), 0 0 12px rgba(199,125,255,.5); }
.ob-tt-r1,.ob-tt-r2{ color:#6fa8ff; } .ob-tt-r3{ color:#c9dcff; } .ob-tt-r4{ color:#ffe14d; }

/* small square slots on the sides of the top row, like the game */
.a-pet{ justify-content:center; } .a-pet > .ob-slot{ width:calc(40px*var(--u)); }
.a-aura{ grid-area:aura; justify-content:center; } .a-aura > .ob-slot{ width:calc(40px*var(--u)); } .a-ring3{ grid-area:ring3; }

.a-wings > .ob-slot{ width:100%; }
.ob-slot u s.e{ background:transparent; border:1px solid #c9b8ff; box-shadow:none; width:4px; height:4px; }
.ob-slot.is-empty{ opacity:1; background:linear-gradient(180deg,#3d3a35,#2c2a26); border-color:#4a463f; }
.ob-slot .ob-sil{ color:#5e5a53; filter:none; font-size:calc(19px*var(--u)); }
.a-weapon .ob-sil, .a-shield .ob-sil, .a-armor .ob-sil, .a-helmet .ob-sil{ font-size:calc(30px*var(--u)); }
.a-costume .ob-sil{ font-size:calc(40px*var(--u)); }
.a-amulet{ grid-area:amulet; justify-content:flex-end; } .a-amulet2{ grid-area:amulet2; } .a-amulet > .ob-slot, .a-amulet2 > .ob-slot{ width:calc(40px*var(--u)); }
.a-armlet, .a-armlet2{ justify-content:center; } .ob-set1 .a-armlet > .ob-slot, .ob-set1 .a-armlet2 > .ob-slot{ width:calc(40px*var(--u)); }
.a-necklace2{ grid-area:necklace2; }