/* PoB Skill Gems left overlay drawer — visually matched to the standalone demo. */
.pob-overlay-launch{
  position:fixed;left:0;top:52%;z-index:980;transform:translateY(-50%);
  display:flex;align-items:center;gap:7px;height:43px;padding:0 12px 0 10px;
  border:1px solid #89591b;border-left:0;border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,#8b5a20 0%,#604018 52%,#4b300f 100%);
  box-shadow:0 0 18px rgba(199,123,29,.18);color:#f2dfb9;
  font:800 11px/1 "Segoe UI",Arial,sans-serif;letter-spacing:1.1px;
  text-shadow:0 1px 1px rgba(0,0,0,.55);cursor:pointer;transition:filter .15s ease,transform .2s ease;
}
.pob-overlay-launch:hover{filter:brightness(1.13)}
.pob-overlay-launch-icon{font-size:10px;color:#ead8b5}
body.pob-overlay-open .pob-overlay-launch{transform:translate(-110%,-50%)}

.pob-overlay-backdrop{position:fixed;inset:0;z-index:989;background:rgba(0,0,0,.42);backdrop-filter:blur(1px)}
.pob-overlay-drawer{
  position:fixed;z-index:990;right:14px;left:auto;top:74px;bottom:18px;width:min(350px,calc(100vw - 28px));
  overflow:auto;overscroll-behavior:contain;border:1px solid #4a3423;border-radius:3px;
  background:#0b0907;box-shadow:0 18px 55px rgba(0,0,0,.6),0 0 0 1px rgba(190,126,52,.05) inset;
  transform:translateX(calc(100% + 28px));opacity:0;visibility:hidden;
  transition:transform .22s ease,opacity .18s ease,visibility .22s;
}
.pob-overlay-drawer.open{transform:translateX(0);opacity:1;visibility:visible}
.pob-overlay-head{position:sticky;top:0;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 9px;border-bottom:1px solid #4a3423;background:linear-gradient(180deg,#1c1510,#100d0a)}
.pob-overlay-head>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.pob-overlay-head strong{font:700 15px Georgia,serif;color:#f0c46b;letter-spacing:.04em}
.pob-overlay-head span{font-size:10px;color:#937b60}
.pob-overlay-close{width:27px;height:27px;border:1px solid #5f432c;background:#17110d;color:#d9bc8f;font-size:17px;line-height:1;cursor:pointer;border-radius:2px}
.pob-overlay-close:hover{background:#24180f;color:#f3d18a}

.gem-panel{padding:0;overflow:visible;background:#0d0b09;color:#cdb99b}
.pob-import{padding:7px 9px;border-bottom:1px solid #35271d;background:#100d0a}
.pob-label{font:700 12px Georgia,serif;color:#d9b66d;margin-bottom:4px}
.pob-import input{box-sizing:border-box;width:100%;background:#090806;color:#cdb99b;border:1px solid #4d3826;padding:6px 8px;font:11px/1.35 Consolas,monospace;outline:none;border-radius:0}
.pob-import input:focus{border-color:#8b6135}
.pob-actions{display:flex;gap:6px;margin-top:6px}
.pob-actions button{border:1px solid #76512c;background:#2a1b0e;color:#efc66d;font-weight:800;font-size:10px;padding:6px 9px;cursor:pointer}
.pob-actions button:last-child{background:#15100c;color:#a99375}
#pobStatus{color:#806f5c;font-size:11px;line-height:1.35;margin-top:5px}
#pobStatus.ok{color:#8fc66e}#pobStatus.error{color:#d47768}
.level-select-wrap{padding:6px 8px;border-bottom:1px solid #35271d;background:#0d0b09}
.level-select{box-sizing:border-box;width:100%;background:#17110d;color:#e2cda9;border:1px solid #5a3f28;padding:6px 7px;font:700 12px "Segoe UI",Arial,sans-serif;outline:none}
.gem-list{padding:4px;overflow:visible}
.gem-item{position:relative;margin-bottom:3px;border:1px solid #2b2119;background:linear-gradient(180deg,#18130f,#0f0c09);overflow:visible}
.gem-main{padding:6px 7px;overflow:visible}
.gem-name{font:700 14px/1.2 "Segoe UI",Arial,sans-serif;color:#dcc4a0;margin-bottom:4px;white-space:normal;overflow-wrap:anywhere}
.gem-sockets{display:flex;align-items:center;flex-wrap:wrap;gap:7px;overflow:visible}
.gem-orb{position:relative;flex:0 0 auto;width:23px;height:23px;border:1px solid #57402d;border-radius:50%;box-sizing:border-box;filter:grayscale(1) brightness(.55);opacity:.72;transition:filter .15s ease,opacity .15s ease,transform .15s ease;box-shadow:inset 0 0 0 1px #1a120c,0 0 0 1px #3a2a1c}
.gem-orb:not(.empty){cursor:pointer}
.gem-orb.checked{filter:none;opacity:1;transform:scale(1.04)}
.gem-orb.red{background:radial-gradient(circle at 38% 35%,#ffd089 0 8%,#de5a2b 9% 26%,#751d13 27% 48%,#1b0d09 49% 68%,#080706 69%)}
.gem-orb.green{background:radial-gradient(circle at 38% 35%,#d9ff96 0 8%,#63b33d 9% 26%,#245b20 27% 48%,#0d180d 49% 68%,#070807 69%)}
.gem-orb.blue{background:radial-gradient(circle at 38% 35%,#c7e6ff 0 8%,#4e91d4 9% 26%,#1f416f 27% 48%,#0b121d 49% 68%,#070809 69%)}
.gem-tip{pointer-events:none;position:absolute;left:50%;bottom:29px;z-index:1005;width:175px;padding:6px 7px;transform:translateX(-50%) translateY(4px);opacity:0;visibility:hidden;border:1px solid #705236;background:#0b0907;box-shadow:0 8px 22px rgba(0,0,0,.55);color:#b9a48a;font-size:10px;line-height:1.3;transition:opacity .12s ease,transform .12s ease,visibility .12s}
.gem-tip b{display:block;margin-bottom:2px;color:#f0cf8c;font-size:13px;font-weight:700;overflow-wrap:anywhere}
.gem-orb:hover .gem-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.gem-item.completed .gem-name{text-decoration:line-through;color:#776b5d;opacity:.75}
.gem-item.completed{background:linear-gradient(180deg,#14110e,#0c0a08)}
.gem-progress{padding:6px 9px 0;font-size:11px;color:#8e7b65}.gem-progress b{color:#e8be67}
.gem-note{padding:7px 9px 10px;font-size:11px;line-height:1.4;color:#756655}
.gem-empty{padding:18px 12px;text-align:center;color:#6f6255;font-size:12px}

@media(max-width:700px){
  .pob-overlay-launch{top:auto;bottom:92px;transform:none}
  body.pob-overlay-open .pob-overlay-launch{transform:translateX(-110%)}
  .pob-overlay-drawer{right:7px;left:auto;top:62px;bottom:7px;width:calc(100vw - 14px)}
  .pob-overlay-backdrop{background:rgba(0,0,0,.58)}
}


/* ===== Compact drawer + custom scrollbar ===== */
.pob-overlay-drawer{
  scrollbar-width:thin;
  scrollbar-color:#6f4b2a #100d0a;
  scrollbar-gutter:stable;
}
.pob-overlay-drawer::-webkit-scrollbar{width:7px}
.pob-overlay-drawer::-webkit-scrollbar-track{
  background:#100d0a;
  border-left:1px solid #24180f;
}
.pob-overlay-drawer::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#8a6138,#5b3c22);
  border:1px solid #2a1b10;
  border-radius:10px;
}
.pob-overlay-drawer::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#a87643,#704a28);
}
.pob-overlay-drawer::-webkit-scrollbar-button{display:none;width:0;height:0}

.pob-overlay-head{
  min-height:42px;
}
.pob-import input{
  height:31px;
}
.pob-actions{
  margin-top:5px;
}
.level-select{
  height:34px;
}
.gem-item:last-child{margin-bottom:0}

@media(max-width:700px){
  .pob-overlay-drawer{width:calc(100vw - 18px);right:9px}
}


/* Tooltip không bị cắt ở mép trái/phải của drawer */
.gem-sockets .gem-orb:nth-child(-n+3) .gem-tip{
  left:0;
  right:auto;
  transform:translateX(0) translateY(4px);
}
.gem-sockets .gem-orb:nth-last-child(-n+2) .gem-tip{
  left:auto;
  right:0;
  transform:translateX(0) translateY(4px);
}
.gem-sockets .gem-orb:nth-child(-n+3):hover .gem-tip,
.gem-sockets .gem-orb:nth-last-child(-n+2):hover .gem-tip{
  transform:translateX(0) translateY(0);
}


/* ===== Tooltip portal: không còn bị drawer/scrollbar cắt ===== */
.gem-orb .gem-tip{display:none!important}
.gem-float-tip{
  position:fixed;
  z-index:2147483000;
  max-width:min(220px,calc(100vw - 20px));
  padding:6px 8px;
  border:1px solid #705236;
  background:#0b0907;
  box-shadow:0 8px 22px rgba(0,0,0,.65);
  color:#f0cf8c;
  font:700 13px/1.25 "Segoe UI",Arial,sans-serif;
  white-space:normal;
  overflow-wrap:anywhere;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:opacity .1s ease,transform .1s ease,visibility .1s;
}
.gem-float-tip.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}