/* Character builder: in-game inventory layout on the client's own paperdoll, Kanai's Cube, follower and Details art
   (builder/ui/*.png, cropped by research/scripts/wiki/builder/build_builder.py). The game windows (paperdolls 520 x 450,
   follower skills 520 x 390, the cube's power row 490 x 256) are drawn at the game's UI scale (--ui-scale, see
   wiki-core.js); the Details frame is 435 wide; the columns are sized around them. */
.bld-top { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.bld-top h1 { margin: 0 12px 0 0; font-size: 24px; }
.bld-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
.bld-actions input[type=text] { width: 190px; }
.bld-actions .btn { min-height: 30px; padding: 2px 14px; }
.bld-cls { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bld-cls button { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 3px 1px 2px; background: #120c08; border: 1px solid var(--line2); color: var(--dim); font: 12px/1.2 Georgia, serif; cursor: pointer; border-radius: 2px; }
.bld-cls button span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bld-cls button .ico { border-radius: 2px; }
.bld-cls button:hover { border-color: var(--gold); color: var(--text); }
.bld-cls button.on { border-color: var(--gold); color: var(--gold2); background: #2a180c; box-shadow: 0 0 10px rgba(255, 150, 50, .25); }

/* ---------------------------------------------------------------- three columns: left (doll), middle (tabs), right (sheet) */
.bld { display: grid; grid-template-columns: max(calc(532px * var(--ui-scale)), 300px) minmax(0, 1fr) 449px; gap: 12px; align-items: start; }
.bld-col { min-width: 0; }
.bld-left, .bld-right { display: flex; flex-direction: column; gap: 8px; }
.bld-pane[hidden], .bld-lbody > [hidden] { display: none !important; }
.bld-mid, .bld-low { background: linear-gradient(#1a120c, #120c08); border: 1px solid var(--line2); box-shadow: inset 0 0 40px rgba(0, 0, 0, .7), 0 4px 18px rgba(0, 0, 0, .6); display: flex; flex-direction: column; min-width: 0; }
.bld-tabs, .bld-ltabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--line2); background: rgba(0, 0, 0, .35); }
.bld-tabs button, .bld-ltabs button { font: 13px Exocet, Georgia, serif; letter-spacing: .05em; color: #bfa77a; background: transparent; border: 1px solid transparent; border-bottom: 0; padding: 6px 14px 5px; cursor: pointer; border-radius: 2px 2px 0 0; margin-bottom: -1px; }
.bld-ltabs button { font-size: 12px; padding: 4px 10px; flex: 1; }
.bld-tabs button:hover, .bld-ltabs button:hover { color: var(--gold2); background: rgba(90, 60, 30, .25); }
.bld-tabs button.on, .bld-ltabs button.on { color: #fff1cc; border-color: var(--line2); background: linear-gradient(#3a2413, #1d120a); box-shadow: inset 0 0 8px rgba(255, 140, 40, .2); }
.bld-tabbody { padding: 10px 12px; min-height: 0; }
.bld-lbody { padding: 8px; min-height: 0; }
.bld-lbody .panel { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.bld-lbody .panel::before, .bld-lbody .panel::after, .bld-lbody .panel > h2:first-child { display: none; }
.bld-right .panel { padding: 12px 14px; margin-bottom: 10px; }
.bld-right .panel > h2:first-child { font-size: 17px; }

/* ---------------------------------------------------------------- paperdoll */
.doll { position: relative; width: 520px; height: 450px; box-sizing: border-box; background: url('ui/paperdoll_inventory.png') center / 520px 450px no-repeat; border: 1px solid #000; box-shadow: 0 6px 24px rgba(0, 0, 0, .7); user-select: none; }
.doll.fol { background-image: none; }
.doll .slot { position: absolute; display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; border: 0; padding: 0; outline: none; }
.doll .slot img.it { max-width: 92%; max-height: 92%; position: relative; z-index: 1; filter: drop-shadow(0 2px 3px #000); }
.doll .slot .qbg { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; opacity: .95; }
.doll .slot.has { background: #0b0806; }
.doll .slot:hover { box-shadow: 0 0 0 1px var(--gold), 0 0 12px rgba(255, 190, 90, .45); }
.doll .slot.sel { box-shadow: 0 0 0 2px #ffcf6a, 0 0 16px rgba(255, 190, 90, .7); }
.doll .slot.anc::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px #c9a14a, inset 0 0 10px rgba(201, 161, 74, .6); pointer-events: none; z-index: 2; }
.doll .slot.pri::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px #d23c2e, inset 0 0 12px rgba(210, 60, 46, .75); pointer-events: none; z-index: 2; }
.doll .slot.off.blocked { opacity: .35; cursor: not-allowed; }
.doll .slot .gemdots { position: absolute; bottom: 2px; left: 0; right: 0; display: flex; justify-content: center; gap: 1px; z-index: 3; }
.doll .slot .gemdots img { width: 14px; height: 14px; }
.doll .left { position: absolute; display: flex; flex-direction: column; align-items: center; padding: 14px 8px 8px; box-sizing: border-box; text-align: center; overflow: hidden; }
.doll .left .cname { font-family: Exocet, Georgia, serif; color: var(--gold2); font-size: 17px; margin-top: 4px; }
.doll .left .lvl { color: var(--dim); font-size: 12.5px; line-height: 1.3; }
.doll .left .big3 { margin-top: auto; width: 100%; }
.doll .left .big3 div { display: flex; justify-content: space-between; gap: 4px; border-top: 1px solid rgba(90, 65, 40, .6); padding: 3px 2px; font-size: 14px; }
.doll .left .big3 b { color: #fff; font-weight: normal; font-family: Exocet, Georgia, serif; }
.doll .left .ico { border: 1px solid #3a2a1a; box-shadow: 0 0 12px #000; }
.doll .left .btnrow { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 6px; width: 100%; }
.doll .left .uibtn { flex: none; width: 162px; height: 40px; background: url('ui/Inventory_DetailsBtn_Normal.png') center / 162px 40px no-repeat; border: 0; color: #e8cf98; font: 14px Exocet, Georgia, serif; letter-spacing: .04em; cursor: pointer; }
.doll .left .uibtn:hover { background-image: url('ui/Inventory_DetailsBtn_Mouseover.png'); color: #fff; }
.doll .left .uibtn.pg { background-image: url('ui/Inventory_ParagonBtn_Normal.png'); }
.doll .left .uibtn.pg:hover { background-image: url('ui/Inventory_ParagonBtn_Mouseover.png'); }

/* ---------------------------------------------------------------- Kanai's Cube */
.cube { display: flex; justify-content: center; padding: 6px 0 2px; }
.cube .cwin { position: relative; flex: none; width: 490px; height: 256px; background: url('ui/KanaisCube_powers.png') 0 0 / 490px 212px no-repeat; }
.cube .kslot { position: absolute; top: 20px; width: 147px; display: flex; flex-direction: column; align-items: center; cursor: pointer; text-align: center; }
.cube .kframe { position: relative; flex: none; width: 97px; height: 168px; background: url('ui/KanaisCube_SlotPower_Up_P2.png') 0 0 / 97px 168px no-repeat; display: flex; align-items: center; justify-content: center; }
.cube .kslot:hover .kframe { background-image: url('ui/KanaisCube_SlotPower_Hover_P2.png'); }
.cube .kslot.sel .kframe, .cube .kslot.has .kframe { background-image: url('ui/KanaisCube_SlotPower_Selected_P2.png'); }
.cube .kframe img { max-width: 64px; max-height: 128px; }
.cube .kframe .empty { width: 97px; height: 168px; background-size: 97px 168px; background-repeat: no-repeat; background-position: 0 0; opacity: .8; }
.cube .kname { margin-top: 30px; color: var(--legendary); font-size: 13px; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.cube .kname.none { color: var(--dim); }

/* ---------------------------------------------------------------- follower */
.fol-pick { display: flex; gap: 8px; margin-bottom: 8px; }
.fol-pick button { flex: 1; display: flex; align-items: center; gap: 6px; padding: 4px; background: #120c08; border: 1px solid var(--line2); color: var(--dim); cursor: pointer; font: 13px Georgia, serif; }
.fol-pick button img { width: 34px; height: 37px; object-fit: cover; }
.fol-pick button.on { border-color: var(--gold); color: var(--gold2); background: #2a180c; }
.fskills { position: relative; width: 520px; height: 390px; background-size: 520px 390px; background-repeat: no-repeat; margin-top: 8px; }
.fskills .fsk { position: absolute; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fskills .fsk .ico, .fskills .fsk .noic { opacity: .38; filter: grayscale(.8); }
.fskills .fsk.on .ico, .fskills .fsk.on .noic { opacity: 1; filter: none; }
.fskills .fsk.on { box-shadow: inset 0 0 0 2px #ffcf6a; }
.fskills .fsk .noic { width: 80%; height: 80%; display: flex; align-items: center; justify-content: center; background: #221810; color: var(--gold); font-size: 10px; text-align: center; border: 1px solid var(--line2); }
.fskills .fname { position: absolute; display: flex; flex-direction: column; justify-content: center; padding: 0 10px; font-size: 15px; color: var(--gold2); line-height: 1.25; overflow: hidden; }
.fskills .fname small { color: var(--dim); font-size: .82em; }

/* ---------------------------------------------------------------- editor */
.ed-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.ed-head .ed-title { margin: 0 auto 0 0; font-size: 17px; }
.eq { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) 473px; gap: 12px; align-items: start; }
.eq.no-tt { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); }
.eq-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.eq-list input[type=search] { width: 100%; }
.eq-ed, .eq-tt { min-width: 0; }
.eq-ed > .affs:first-child { margin-top: 0; }
.picklist { max-height: 300px; overflow: auto; border: 1px solid #2a1d12; background: #0d0906; }
.picklist .pi { display: flex; align-items: center; gap: 8px; padding: 4px 8px; cursor: pointer; border-bottom: 1px solid #1b130c; }
.picklist .pi:hover { background: #1f150d; }
.picklist .pi.on { background: #2e1c0d; }
.picklist .pi img { width: 30px; height: 30px; object-fit: contain; }
.picklist .pi .sub { color: var(--dim); font-size: 12px; margin-left: auto; text-align: right; }
.grade { display: inline-flex; border: 1px solid var(--line2); border-radius: 3px; overflow: hidden; }
.grade button { background: #120c08; color: var(--dim); border: 0; padding: 4px 10px; cursor: pointer; font: 13px Georgia, serif; }
.grade button + button { border-left: 1px solid var(--line2); }
.grade button.on { background: #3a230f; color: var(--gold2); }
.grade button.on.a { color: var(--ancient); }
.grade button.on.p { color: #ff6b5b; }
.affs { margin: 8px 0; }
.aff { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 4px 10px; align-items: center; padding: 5px 0; border-bottom: 1px dotted #2a1d12; }
.aff .txt { color: var(--affix); font-size: 13.5px; }
.aff .txt.pw { color: var(--legendary); }
.aff .txt.fx { color: #9fa3ff; }
.aff .ctl { display: flex; flex-direction: column; gap: 2px; }
.aff input[type=range] { width: 100%; accent-color: #c8913a; }
.aff select { width: 100%; font-size: 13px; }
.aff .kind { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.aff.rnd .txt { color: #8f8fff; }
.sock { display: flex; gap: 8px; align-items: center; padding: 5px 0; flex-wrap: wrap; }
.sock img.g { width: 30px; height: 30px; }
.sock select { flex: 1; min-width: 170px; }
.sock input[type=number] { width: 80px; }
.ed-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; align-items: start; }
.gemtxt { color: #d2c3a5; font-size: 12.5px; flex-basis: 100%; }
.gemtxt b { color: var(--legendary); font-weight: normal; }

/* ---------------------------------------------------------------- paragon */
.para-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.para-top input[type=number] { width: 100px; }
.para { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.pcat { background: #0e0906 url('ui/SkillsPane_Paragon_StatBase.png') top center / 100% 36px no-repeat; border: 1px solid #2a1d12; padding: 6px 10px 8px; }
.pcat h3 { margin: 2px 0 10px; font-size: 15px; display: flex; justify-content: space-between; align-items: center; height: 26px; }
.pcat h3 span { font-family: Georgia, serif; font-size: 12px; color: var(--dim); }
.pcat h3 span.over { color: #ff6b5b; }
.pb { display: grid; grid-template-columns: minmax(0, 1fr) 70px; gap: 6px; align-items: center; font-size: 13px; padding: 2px 0; }
.pb input { width: 70px; padding: 2px 4px !important; }
.pb .val { color: var(--affix); font-size: 12px; }

/* ---------------------------------------------------------------- character sheet */
.sheet { position: relative; width: 435px; box-sizing: border-box; margin-bottom: 10px; background: #0b0705 url('ui/CharacterStatDetail.png') center top / 435px 1200px repeat-y; border: 0; padding: 22px 26px 18px; box-shadow: inset 0 0 40px rgba(0, 0, 0, .8); }
.sheet h2 { text-align: center; margin: 0 0 8px; }
.sheet .big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.sheet .big div { text-align: center; background: rgba(0, 0, 0, .55); border: 1px solid #3a2a1a; padding: 6px 2px; }
.sheet .big b { display: block; font-family: Exocet, Georgia, serif; font-weight: normal; color: #fff; font-size: 17px; }
.sheet .big span { color: var(--dim); font-size: 12px; }
.sheet h4 { font-family: Exocet, Georgia, serif; color: var(--gold); font-size: 14px; margin: 10px 0 3px; padding-bottom: 16px; background: url('ui/Details_DividerLine.png') center bottom / 325px 16px no-repeat; }
.sheet dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0; font-size: 14px; background: rgba(0, 0, 0, .45); }
.sheet dt { color: #b9a988; padding: 1px 4px; }
.sheet dd { margin: 0; color: #fff; text-align: right; padding: 1px 4px; }
.sheet dd.hi { color: #7ce27c; }
.sbon .on { color: #3aff3a; }
.sbon .off { color: #6b6b6b; }
.sbon p { margin: 3px 0; font-size: 13px; }
.sbon h3 { font-size: 14px; margin: 8px 0 3px; }
.pwlist { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.pwlist li { padding: 4px 0; border-bottom: 1px dotted #2a1d12; display: flex; gap: 8px; align-items: flex-start; }
.pwlist li img { width: 26px; height: 26px; flex: none; }
.pwlist .p { color: var(--legendary); }
.saved { display: grid; gap: 4px; max-height: 200px; overflow: auto; }
.saved div { display: flex; gap: 6px; align-items: center; font-size: 13px; padding: 3px 6px; background: #120c08; border: 1px solid #2a1d12; }
.saved div span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved button { font-size: 12px; padding: 1px 8px; background: #1c130c; color: var(--text); border: 1px solid var(--line2); cursor: pointer; }
.hint { color: var(--dim); font-size: 13px; }
.bldtip { position: fixed; z-index: 120; display: none; pointer-events: none; }

/* ---------------------------------------------------------------- Gems tab */
.gm-tools { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #2a1d12; font-size: 13px; }
.gm-tools select { font-size: 13px; }
.gm-tools input[type=number] { width: 70px; }
.gm-sep { width: 1px; align-self: stretch; background: #2a1d12; margin: 0 4px; }
.gm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 8px; }
.gm-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px; padding: 6px; background: #120c08; border: 1px solid #2a1d12; }
.gm-it { display: flex; gap: 6px; align-items: flex-start; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: 12.5px/1.3 Georgia, serif; color: var(--text); }
.gm-it img { width: 36px; height: 36px; object-fit: contain; flex: none; }
.gm-it:hover .q-legendary, .gm-it:hover .q-set { text-decoration: underline; }
.gm-socks .sock { padding: 2px 0; }
.gm-socks .sock select { min-width: 150px; }

/* ---------------------------------------------------------------- Import / Save tab */
.io { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.io h3 { font-size: 15px; margin: 4px 0 4px; }
.io-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 12px; }
.io-row input[type=text] { flex: 1; min-width: 180px; }
.io-row .btn { min-height: 30px; padding: 2px 14px; }
.io textarea { width: 100%; background: #0d0906; color: var(--text); border: 1px solid var(--line2); padding: 5px 8px; font: 12px Consolas, monospace; border-radius: var(--radius); resize: vertical; }
.io .saved { max-height: none; }

/* ---------------------------------------------------------------- one screen (wiki.css body.app, from 1200 x 600): the page is
   the window; the heading lives in the header bar, the three columns fill the height, the lists scroll inside */
@media (min-width: 1200px) and (min-height: 600px) {
  body.bld-app .bld-top { margin-bottom: 8px; }
  body.bld-app .bld-top h1 { display: none; }
  body.bld-app .bld { flex: 1 1 0; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  .bld-col { min-height: 0; }
  .bld-left { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; align-items: center; }
  .bld-left > * { align-self: stretch; }
  .bld-left #doll { flex: none; align-self: center; }
  .bld-low { flex: 1 0 auto; }
  .bld-lbody { flex: 1; overflow-y: auto; scrollbar-width: thin; }
  .bld-lbody .cube { justify-content: center; }
  .bld-mid { overflow: hidden; }
  .bld-tabbody { flex: 1; overflow-y: auto; scrollbar-width: thin; }
  #editor:not([hidden]) { height: 100%; display: flex; flex-direction: column; }
  #editor .eq { flex: 1; min-height: 0; align-items: stretch; }
  #editor .eq > div { min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
  #editor .eq-list { overflow: hidden !important; }
  #editor #plist { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  #editor .picklist { flex: 1; max-height: none; }
  .bld-right { overflow: hidden; }
  .bld-rscroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
}
/* 1200 to 1599 px: the three columns stay; the import pane stacks */
@media (min-width: 1200px) and (max-width: 1599px) {
  .bld { grid-template-columns: max(calc(532px * var(--ui-scale)), 290px) minmax(0, 1fr) 449px; }
  .io { grid-template-columns: minmax(0, 1fr); }
}
/* one screen: the build name and its buttons sit at the top of the right column instead of a row of their own, the
   class portraits go without their names (the name shows on hover and on the paperdoll), and the item list shows each
   item's type under its name so long names keep one or two lines */
@media (min-width: 1200px) and (min-height: 600px) {
  body.bld-app main { position: relative; }
  body.bld-app .bld-top { position: absolute; top: calc(var(--app-pad) / 2); right: 12px; width: 449px; margin: 0; z-index: 5; }
  body.bld-app .bld-actions { flex-wrap: nowrap; width: 100%; margin: 0; }
  body.bld-app .bld-actions input[type=text] { flex: 1 1 auto; width: auto; min-width: 0; }
  body.bld-app .bld-right { padding-top: 42px; }
  body.bld-app .bld-cls button span:last-child { display: none; }
  #editor .picklist .pi { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; row-gap: 0; }
  #editor .picklist .pi img { grid-row: 1 / 3; }
  #editor .picklist .pi > span { grid-column: 2; line-height: 1.25; }
  #editor .picklist .pi .sub { margin: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* with the tooltip under the editor, the editor takes the height its properties need and the tooltip the rest (at
   least 120 px, scrolling inside) */
@media (min-width: 1200px) and (max-width: 2199px) and (min-height: 600px) {
  #editor .eq:not(.no-tt) { grid-template-rows: minmax(0, max-content) minmax(120px, 1fr); }
}
/* up to 2199 px the middle column has no room for the list, the editor and the 473 px tooltip side by side: the tooltip
   goes under the editor */
@media (min-width: 1200px) and (max-width: 2199px) {
  .eq { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); }
  .eq-tt { grid-column: 2; }
  #editor .eq { grid-template-rows: minmax(0, 3fr) minmax(0, 2fr); }
  #editor .eq-list { grid-row: 1 / span 2; }
  #editor .eq.no-tt { grid-template-rows: minmax(0, 1fr); }
  #editor .eq.no-tt .eq-list { grid-row: auto; }
}
@media (max-width: 1199px) {
  .bld { grid-template-columns: minmax(0, 532px) minmax(0, 1fr); }
  .bld-right { grid-column: 1 / -1; }
  .eq, .eq.no-tt { grid-template-columns: minmax(0, 1fr); }
  .eq-list .picklist { max-height: 260px; }
}
@media (max-width: 900px) {
  .bld { grid-template-columns: minmax(0, 1fr); }
  .ed-cols { grid-template-columns: minmax(0, 1fr); }
  .bld-actions { margin-left: 0; }
  .io { grid-template-columns: minmax(0, 1fr); }
  .gm-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .bld-cls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bld-tabs button { padding: 5px 8px 4px; font-size: 12px; }
  .bld-actions input[type=text] { width: 100%; }
  .aff { grid-template-columns: minmax(0, 1fr); }
  .sheet { max-width: 100%; }
}


/* ---------------------------------------------------------------- Skills tab (builder-skills.js): the game's Skills window,
   1200 x 1000 texture pixels from SkillPane.ui, zoomed as a whole to the game scale. Textures in builder/ui/. */
@font-face { font-family: 'D3Serif'; src: url('../fonts/d3-serif.ttf') format('truetype'); font-display: swap; }
#skills { display: flex; justify-content: center; }
.skw { position: relative; flex: none; background: url('ui/SkillsPane_Skills_Category_Base.png') 0 0 / 100% 100% no-repeat; font-family: D3Serif, Georgia, serif; line-height: 1.15; user-select: none; }
.skw > *, .skw button > span, .skw button > img { position: absolute; box-sizing: border-box; }
.skw img { display: block; }
.skw button { position: absolute; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; outline: none; }
.skw .dec { pointer-events: none; }
.skw .sk-title { text-align: center; font-family: Exocet, Georgia, serif; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 0 3px #000, 1px 1px 1px #000; }
.skw [style*="font-size"] { text-shadow: 0 0 2px #000, 1px 1px 1px #000; }
/* box title plaques: cap, text, cap centred on the box's top edge */
.skw .plq { display: flex; justify-content: center; align-items: flex-start; pointer-events: none; }
.skw .plq img { position: static; width: 104px; height: 29px; }
.skw .plq span { position: static; white-space: nowrap; font-family: Exocet, Georgia, serif; letter-spacing: .04em; text-shadow: none; padding: 0 6px; line-height: 23px; }
/* skill plates (SkillsPane_Skills_CategoryPlate_*: 416 x 120, the open lock is the empty slot) */
.skw .plate .pl-btn { background: url('ui/SkillsPane_Skills_CategoryPlate_Normal.png') 0 0 / 100% 100% no-repeat; }
.skw .plate:hover .pl-btn, .skw .plate:focus-visible .pl-btn { background-image: url('ui/SkillsPane_Skills_CategoryPlate_Mouseover.png'); }
.skw .plate[tabindex="-1"] { cursor: default; }
.skw .plate[tabindex="-1"]:hover .pl-btn { background-image: url('ui/SkillsPane_Skills_CategoryPlate_Normal.png'); }
.skw .plate .pl-cat { display: flex; align-items: center; justify-content: center; font-family: Exocet, Georgia, serif; letter-spacing: .04em; }
.skw .plate .pl-ic { background: #000; }
.skw .plate .pl-ic .sk-ic, .skw .sksel .ic .sk-ic, .skw .pgrid .ic .sk-ic, .skw .pas .ps-ic .sk-ic { display: block; width: 64px; height: 64px; }
.skw .plate .pl-nm, .skw .plate .pl-ru span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.skw .plate .pl-ru img { position: absolute; }
.skw .plate .pl-hk { display: flex; align-items: center; justify-content: center; font-family: Exocet, Georgia, serif; }
.skw .plate .pl-hk img { position: static; width: 26px; height: 26px; }
/* passive slots (SkillsPane_Skills_PassiveFrame_*: 98 x 98 round frames, the lock is the empty slot) */
.skw .pas .ps-fr, .skw .pgrid .fr { background: url('ui/SkillsPane_Skills_PassiveFrame_Normal.png') 0 0 / 100% 100% no-repeat; z-index: 1; }
.skw .pas.has .ps-fr, .skw .pgrid .fr { background-image: url('ui/SkillsPane_Skills_PassiveFrame_Normal.png'); }
.skw .pas:hover .ps-fr, .skw .pgrid:hover .fr { background-image: url('ui/SkillsPane_Skills_PassiveFrame_Mouseover.png'); }
.skw .pas .ps-fr.sel, .skw .pgrid .fr.sel { background-image: url('ui/SkillsPane_Skills_PassiveFrame_Selected.png'); }
.skw .pas .ps-ic, .skw .pgrid .ic { border-radius: 50%; overflow: hidden; z-index: 2; }
.skw .pas .ps-nm { display: flex; align-items: flex-start; justify-content: center; text-align: center; }
.skw .pgrid .tx { display: flex; align-items: center; text-align: left; padding-left: 4px; }
.skw .pgrid .chk, .skw .sksel .chk { z-index: 2; }
/* the category's skills (SkillsPane_Skills_Frame_*: 82 x 82) */
.skw .sksel .fr { background: url('ui/SkillsPane_Skills_Frame_Normal.png') 0 0 / 100% 100% no-repeat; z-index: 1; }
.skw .sksel.on .fr { background-image: url('ui/SkillsPane_Skills_Frame_Selected.png'); }
.skw .sksel:hover .ic { filter: brightness(1.25); }
.skw .sksel .nm, .skw .rsel .nm { display: flex; align-items: flex-start; justify-content: center; text-align: center; }
.skw .sk-catname { text-align: center; font-family: Exocet, Georgia, serif; letter-spacing: .04em; text-shadow: none !important; }
/* rune stones (SkillsPane_RuneStone1-5 runes A-E, 6 No Rune; Pushed is the chosen one) */
.skw .rsel .st { background: var(--n) 0 0 / 100% 100% no-repeat; }
.skw .rsel:hover .st { background-image: var(--h); }
.skw .rsel.on .nm { color: #ffe79e !important; }
/* the red Battle.net buttons (262 x 50) and arrows (75 x 67) */
.skw .redbtn { background: url('ui/BattleNetButton_RedUp_262x50.png') 0 0 / 100% 100% no-repeat; font-family: Exocet, Georgia, serif; font-size: 20px; letter-spacing: .05em; color: #f3d9a4; text-shadow: 0 0 3px #000, 1px 1px 1px #000; }
.skw .redbtn:hover { background-image: url('ui/BattleNetButton_RedOver_262x50.png'); color: #fff; }
.skw .redbtn:active { background-image: url('ui/BattleNetButton_RedDown_262x50.png'); }
.skw .redbtn:disabled { background-image: url('ui/BattleNetButton_RedDisabled_262x50.png'); color: #7d6c55; cursor: default; }
.skw .arrow.l { background: url('ui/BattleNetButton_RedArrowLeftUp_75x67.png') 0 0 / 100% 100% no-repeat; }
.skw .arrow.l:hover { background-image: url('ui/BattleNetButton_RedArrowLeftOver_75x67.png'); }
.skw .arrow.l:active { background-image: url('ui/BattleNetButton_RedArrowLeftDown_75x67.png'); }
.skw .arrow.l:disabled { background-image: url('ui/BattleNetButton_RedArrowLeftDisabled_75x67.png'); cursor: default; }
.skw .arrow.r { background: url('ui/BattleNetButton_RedArrowRightUp_75x67.png') 0 0 / 100% 100% no-repeat; }
.skw .arrow.r:hover { background-image: url('ui/BattleNetButton_RedArrowRightOver_75x67.png'); }
.skw .arrow.r:active { background-image: url('ui/BattleNetButton_RedArrowRightDown_75x67.png'); }
.skw .arrow.r:disabled { background-image: url('ui/BattleNetButton_RedArrowRightDisabled_75x67.png'); cursor: default; }
/* the window's close button: Cancel in the selection views */
.skw .xbtn { background: url('ui/BattleNetExtendedExperience_CloseButtonUp.png') 0 0 / 100% 100% no-repeat; }
.skw .xbtn:not(.idle):hover { background-image: url('ui/BattleNetExtendedExperience_CloseButtonOver.png'); }
.skw .xbtn.idle { cursor: default; }
/* Elective Mode (the game's options checkbox) */
.skw .elect { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: Exocet, Georgia, serif; font-size: 20px; letter-spacing: .04em; color: #d7851a; text-shadow: 0 0 3px #000; }
.skw .elect span { position: static !important; }
.skw .elect .cbx { width: 40px; height: 40px; background: url('ui/CheckboxNormal.png') 0 0 / 100% 100% no-repeat; }
.skw .elect:hover .cbx { background-image: url('ui/CheckboxMouseover.png'); }
.skw .elect.on .cbx { background-image: url('ui/CheckboxNormalChecked.png'); }
.skw .elect.on:hover .cbx { background-image: url('ui/CheckboxMouseoverChecked.png'); }
.skw .elect:hover { color: #ffb347; }
/* the in-game skill tooltip (473 px, 1:1): Tooltip_Skill_Damage_<type> header, body tile, bottom edge */
.sktt-wrap { position: fixed; z-index: 1000; display: none; pointer-events: none; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .85)); }
.sktt { width: 473px; font: 16px/1.35 D3Serif, Georgia, serif; color: #fff; }
.sktt-top { min-height: 72px; padding: 18px 45px 10px; box-sizing: border-box; text-align: center; background: #120d09 0 0 / 473px 109px no-repeat; border: 1px solid #3a2c1d; border-bottom: 0; }
.sktt-top.pas { background-image: url('ui/Tooltip_Frame_Tile_Middle.png'); background-size: 473px auto; background-repeat: repeat-y; }
.sktt-top .skt-nm { font: 22px Exocet, Georgia, serif; letter-spacing: .04em; color: #fff; text-shadow: 0 0 4px #000, 1px 1px 2px #000; }
.sktt-top .skt-rn { font-size: 18px; color: #fff; text-shadow: 0 0 3px #000; }
.sktt-top .skt-dt { font-size: 16px; color: #a7adb4; text-shadow: 0 0 3px #000; margin-top: 2px; }
.sktt-body { background: #0b0806 url('ui/Tooltip_Frame_Tile_Middle.png') 0 0 / 473px auto repeat-y; padding: 8px 20px 10px 23px; border-left: 1px solid #2b2016; border-right: 1px solid #2b2016; }
.sktt-body.plain { padding: 14px 24px; color: #c7b377; }
.sktt .skt-row { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 10px; }
.sktt .skt-ifr { flex: none; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: url('ui/Tooltip_IconFrame_Small.png') 0 0 / 100% 100% no-repeat; }
.sktt .skt-ifr .sk-ic { width: 64px; height: 64px; }
.sktt .skt-ifr.rs { background: none; }
.sktt .skt-ifr.rs img { width: 64px; height: 64px; }
.sktt .skt-tx { flex: 1; min-width: 0; color: #fff; }
.sktt .skt-flav { color: #c7b377; font-style: italic; margin: 2px 0 8px 85px; }
.sktt .skt-req { display: flex; gap: 12px; align-items: center; color: #909090; border-top: 1px solid #2d241a; padding-top: 6px; }
.sktt .skt-req img { width: 45px; height: 45px; margin-left: 14px; }
.sktt-bot { height: 9px; background: url('ui/Tooltip_Frame_Bottom.png') 0 0 / 100% 100% no-repeat; }
.sktt .c-green { color: #00ff00; }
.sktt .c-gold { color: #c7b377; }
.sktt .c-red { color: #ff0000; }
.sktt .c-white { color: #fff; }
.sktt .c-grey, .sktt .c-gray { color: #909090; }
.sktt .c-blue { color: #6969ff; }
.sktt .c-orange { color: #bf642f; }

/* ---------------------------------------------------------------- hero panel (builder.js drawDoll, hero3d): the left column's
   Hero tab. The 3D hero fills the panel; the slots stand down both sides at the game's proportions (--k, set from
   the panel's size), each with its frame cut from the inventory window; name and level over the top, the three
   headline numbers and the Details / Paragon buttons under the hero's feet */
.bld-ltabs button { flex: 1; padding: 4px 4px; white-space: nowrap; }
.bld-ltabs { flex-wrap: nowrap; }
.doll.hdoll { width: 100%; height: 600px; --k: .8; --top: 44px; --foot: 150px; background: radial-gradient(ellipse at 50% 42%, #2a1c12 0%, #150d08 55%, #0a0604 100%);
  border: 1px solid #000; box-shadow: inset 0 0 50px rgba(0, 0, 0, .8); overflow: hidden; }
.hdoll .hero3d-doll { position: absolute; left: 0; right: 0; top: var(--top); bottom: var(--foot); z-index: 0; }
.hdoll .hd-col { position: absolute; top: 8px; bottom: 8px; width: calc(81px * var(--k)); display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; z-index: 2; pointer-events: none; }
.hdoll .hd-col.l { left: 6px; }
.hdoll .hd-col.r { right: 6px; }
.doll.hdoll .slot { position: relative; flex: none; pointer-events: auto; width: calc(var(--rw) * var(--k) * 1px); height: calc(var(--rh) * var(--k) * 1px);
  background: url('ui/paperdoll_inventory.png') calc(var(--rx) * var(--k) * -1px) calc(var(--ry) * var(--k) * -1px) / calc(520px * var(--k)) calc(450px * var(--k)) no-repeat; }
.doll.hdoll .slot .gemdots img { width: calc(14px * var(--k)); height: calc(14px * var(--k)); }
.hdoll .hd-top { position: absolute; top: 6px; left: calc(81px * var(--k) + 10px); right: calc(81px * var(--k) + 10px); z-index: 1; text-align: center; pointer-events: none;
  text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.hdoll .cname { font-family: Exocet, Georgia, serif; color: var(--gold2); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hdoll .lvl { color: var(--dim); font-size: 12px; line-height: 1.3; }
.hdoll .hd-foot { position: absolute; bottom: 8px; left: calc(81px * var(--k) + 10px); right: calc(81px * var(--k) + 10px); z-index: 1; }
.hdoll .big3 div { display: flex; justify-content: space-between; gap: 4px; border-top: 1px solid rgba(90, 65, 40, .6); padding: 2px 2px; font-size: 13px; }
.hdoll .big3 b { color: #fff; font-weight: normal; font-family: Exocet, Georgia, serif; }
.hdoll .btnrow { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 6px; }
.hdoll .uibtn { flex: none; width: 100%; max-width: 162px; height: 36px; background: url('ui/Inventory_DetailsBtn_Normal.png') center / 100% 100% no-repeat; border: 0;
  color: #e8cf98; font: 13px Exocet, Georgia, serif; letter-spacing: .04em; cursor: pointer; }
.hdoll .uibtn:hover { background-image: url('ui/Inventory_DetailsBtn_Mouseover.png'); color: #fff; }
.hdoll .uibtn.pg { background-image: url('ui/Inventory_ParagonBtn_Normal.png'); }
.hdoll .uibtn.pg:hover { background-image: url('ui/Inventory_ParagonBtn_Mouseover.png'); }
.hero3d-doll .h3-stage { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; cursor: grab; touch-action: none;
  -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent); }
.hero3d-doll .h3-stage:active { cursor: grabbing; }
.hero3d-doll .h3-stage canvas { display: block; width: 100% !important; height: 100% !important; outline: none; }
.hero3d-doll .h3-stage .v3d-overlay { display: none; }
.hero3d-doll .h3-still { position: absolute; left: 50%; bottom: 4px; height: 80%; transform: translateX(-50%); object-fit: contain; opacity: .85; transition: opacity .35s; pointer-events: none; }
.hero3d-doll.ready .h3-stage { opacity: 1; }
.hero3d-doll.ready .h3-still { opacity: 0; }
.hero3d-doll .h3-g { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 2; display: flex; gap: 3px; }
.hero3d-doll .h3-g[hidden] { display: none; }
.hero3d-doll .h3-g button { width: 22px; height: 20px; padding: 0; border: 1px solid #4a3522; border-radius: 2px; background: rgba(12, 8, 5, .8); color: var(--dim);
  font: 12px/18px Exocet, Georgia, serif; cursor: pointer; }
.hero3d-doll .h3-g button:hover { color: var(--gold2); border-color: var(--gold); }
.hero3d-doll .h3-g button.on { color: #fff1cc; border-color: var(--gold); background: #2a180c; }
/* one screen: the Hero tab's panel takes the column's height under the class picker and the tab strip; from 1600 px
   the left column is a little wider for the hero */
@media (min-width: 1200px) and (min-height: 600px) {
  .bld-low.lo-hero { flex: 1 1 0; min-height: 0; }
  .bld-low.lo-hero .bld-lbody { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 6px; }
  .bld-low.lo-hero #doll { flex: 1; min-height: 0; align-self: stretch; }
  .doll.hdoll { height: 100%; }
}
@media (min-width: 1600px) and (min-height: 600px) {
  body.bld-app .bld { grid-template-columns: max(calc(600px * var(--ui-scale)), 320px) minmax(0, 1fr) 449px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero3d-doll .h3-stage, .hero3d-doll .h3-still { transition: none; }
}