/* Reading sizes are defined at their source (12px minimum). Item descriptions
   use a 13px reading face, with each property centered as one line, D2-style. */
#tooltip{box-sizing:border-box;width:420px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);padding:10px 12px;overflow:auto;font-size:13px;line-height:1.45;text-align:center;overflow-wrap:anywhere;scrollbar-width:thin}
#tooltip div,#tooltip span,#tooltip small,#tooltip b,#tooltip i{font-size:13px!important;text-align:center}
#tooltip .tname{font-size:15px!important;line-height:1.35;margin:0;padding:0 0 5px}
#tooltip .tipHead{flex-direction:column;justify-content:center;gap:6px!important;margin:-10px -12px 8px!important;padding:10px 14px!important}
#tooltip .tipHead>div{width:100%;min-width:0}
#tooltip .tipDetails,#tooltip .tipCompare{min-width:0}
#tooltip div[style*="justify-content:space-between"],#tooltip .biRow{display:block!important}
#tooltip div[style*="justify-content:space-between"]>span,#tooltip .biRow>span{margin:0 .2em}
#tooltip div[style*="display:flex"]{justify-content:center!important;flex-wrap:wrap;gap:6px!important}
#tooltip .tipCompare>div{margin-top:0!important;border-top:0!important;padding-top:0!important}
#tooltip.comparing{width:780px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;column-count:auto}
#tooltip.comparing .tipHead{grid-column:1 / -1}
#tooltip.comparing .tipCompare{border-left:1px solid #7d8a9c44;padding-left:18px}
#tooltip .biRow{padding:3px 0}
#tooltip .biHd{margin:4px 0 6px}
#tooltip .biLine{display:block;margin-top:3px}
#tooltip [style*="white-space:nowrap"]{white-space:normal!important}
#tooltip .tipDetails>div,#tooltip .tipCompare>div{break-inside:avoid}
/* The short footer hint sits on its own line under the centered verdict. */
#tooltip .tipDetails>div:last-child>span:last-child[style*="white-space"]{display:block;margin-top:5px}
.gLbl,#hoverLbl{text-align:center;line-height:1.4}
/* Smaller labels need enough room for their new reading size. */
.skTierTag small,.skSub,.skPts span,.skCmp small,.skFaces em,.skTags span{letter-spacing:.12em}
.pwStat small,.pwCls,.secHdr,.skSec{letter-spacing:.12em}
.slot .nm{line-height:1.1;overflow-wrap:anywhere;letter-spacing:0;white-space:normal!important}
.mmLegendBtn{width:54px;left:calc(50% - 27px);letter-spacing:.04em}
.eq .en{line-height:1.2;overflow-wrap:anywhere}
.stTabs small{font-size:max(12px,var(--qo-small,12px))}
.skRunes .rt{text-align:center}
.skRunes .rh{flex-wrap:wrap;gap:4px}
.skRunes .ru .grm{min-width:18px;min-height:18px;line-height:18px}
/* Touch keeps desktop geometry; compensate for its viewport scale for reading.
   --qoTZ remains the user's MORE > TEXT multiplier. */
html.qoTouch #tooltip{font-size:calc(18px * var(--qoTZ,1));width:560px;line-height:1.35}
/* 2026-10-13: tooltip notes in reading case, no tracking: property lines fit on one line (Pavel: no wrapping) */
#tooltip .tipNote{color:#8e97a6;letter-spacing:0;text-transform:none;line-height:1.35}
html.qoTouch #tooltip div,html.qoTouch #tooltip span,html.qoTouch #tooltip small,html.qoTouch #tooltip b,html.qoTouch #tooltip i{font-size:calc(18px * var(--qoTZ,1))!important}
html.qoTouch #tooltip .tname{font-size:calc(21px * var(--qoTZ,1))!important}
html.qoTouch #tooltip.comparing{width:1100px}
html.qoTouch #tooltip .tipHead>img{display:none}
#tooltip{pointer-events:auto;touch-action:pan-y;overscroll-behavior:contain}
/* Scroll the content of phone windows at a legible scale; never shrink the
   skill book or power column until its 12px labels become 5px text. */
html.qoTouch .panel,html.qoTouch #talentPanel{--qo-small:calc(18.5px * var(--qoTZ,1));zoom:1!important;box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100vh - 16px);touch-action:pan-y}
html.qoTouch #invPanel.ivModern{width:calc(100vw - 24px)!important;top:8px!important;height:calc(100vh - 16px)!important}
html.qoTouch #invPanel .ivBody.ivT-bag{overflow-y:auto!important;grid-template-rows:auto auto auto;align-content:start}
html.qoTouch #invPanel .ivT-bag .ivPower{overflow:visible!important;zoom:1!important}
html.qoTouch #invPanel .ivT-bag .ivHeroDoll{min-height:560px}
html.qoTouch #skillPanel.skModern{width:calc(100vw - 24px);height:calc(100vh - 16px)!important;top:8px!important;zoom:1!important}
html.qoTouch #skillPanel .skBody{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
html.qoTouch #skillPanel .skTree,html.qoTouch #skillPanel .skDet{overflow-y:auto!important;min-width:0;padding:12px}
html.qoTouch #skillPanel .skNodes{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html.qoTouch #skillPanel .skLink{grid-template-columns:repeat(3,124px);gap:8px}
html.qoTouch #skillPanel .skNm{min-height:44px}
html.qoTouch #skillPanel .skKick,html.qoTouch #skillPanel .skPts span{letter-spacing:.06em}
html.qoTouch #skillPanel .skHead{gap:10px;padding:0 12px}
html.qoTouch #attrPanel{top:8px!important;max-height:calc(100vh - 16px);width:calc(100vw - 24px)}
html.qoTouch #codexPanel:not(.huntOn)>:not(h2):not(.qoX):not(#chronTabs),html.qoTouch #codexPanel.huntOn .hBox,html.qoTouch #questPanel .deedRow{zoom:1!important}
html.qoTouch #codexPanel,html.qoTouch #questPanel{top:8px!important;bottom:8px!important}
html.qoTouch #log{font-size:calc(18px * var(--qoTZ,1))!important;line-height:1.35}
html.qoTouch #qoTUI .mb .lb,html.qoTouch #qoTUI .ut .lb{font-size:18px;letter-spacing:.02em}
html.qoTouch #invPanel .eq .lbl{letter-spacing:0;white-space:normal;overflow-wrap:anywhere;line-height:1.15;text-transform:none}
html.qoTouch #invPanel .ivT-bag .ivHero #doll.dollBig{grid-template-columns:110px minmax(0,1fr) 110px}
html.qoTouch #invPanel .ivT-bag .ivHero .eq{min-height:68px}
html.qoTouch #invPanel .ivT-bag .ivGridCol{min-height:430px;max-height:none;overflow:visible}
html.qoTouch #invPanel .ivT-bag .ivGridCol #dropZone{position:static;margin:4px 0 6px}
html.qoTouch #invPanel .ivTools{flex-wrap:wrap;gap:5px}
html.qoTouch #invPanel .pwBig{grid-template-columns:1fr 1fr}
html.qoTouch #invPanel .pwStat.pwDmg{grid-column:1 / -1}
html.qoTouch #invPanel .pwStat small{font-family:'Alegreya Sans',sans-serif;letter-spacing:0;overflow-wrap:normal}
html.qoTouch #invPanel .ivT-bag .ivHero #doll.dollBig{flex:0 0 auto;grid-template-rows:repeat(8,68px)}
html.qoTouch #invPanel .ivT-bag .ivHero #dollStage{min-height:520px;max-height:520px;align-self:start}
html.qoTouch #invPanel .pwTr b{white-space:normal;overflow-wrap:anywhere}
html.qoTouch .hGrid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
html.qoTouch .hCard *{min-width:0;overflow-wrap:anywhere}
html.qoTouch .letRow .ln{min-width:2.2em;flex-shrink:0}
html.qoTouch #menu{--qo-small:18.5px}
html.qoTouch #qoEffects{--qo-small:18.5px}
html.qoTouch #menu .mBtn .sub{font-size:max(18.5px,.62em)}
html.qoTouch #menu .mBtn.sm{font-size:18.5px}
/* Ctrl compare, compact (2026-10-04, Pavel: "takes up too much of screen"): ~half the old 780px,
   label/value rows instead of centred stacks, a one-line header, and the scoring footnotes only with
   the inventory's ? help on (.tipHelp). Touch keeps its own large layout. */
#tooltip.comparing:not(.tipHelp) .isNote{display:none}
html:not(.qoTouch) #tooltip.comparing{width:540px;column-gap:14px;padding:8px 10px;line-height:1.3;text-align:left}
html:not(.qoTouch) #tooltip.comparing div,html:not(.qoTouch) #tooltip.comparing span,html:not(.qoTouch) #tooltip.comparing b{font-size:12px!important;text-align:left}
html:not(.qoTouch) #tooltip.comparing .tname{font-size:14px!important;padding:0;border:0;margin:0}
html:not(.qoTouch) #tooltip.comparing .tipHead{flex-direction:row;flex-wrap:nowrap;justify-content:flex-start!important;gap:9px!important;margin:-8px -10px 6px!important;padding:6px 10px!important}
html:not(.qoTouch) #tooltip.comparing .tipHead>div{width:auto;flex:1}
html:not(.qoTouch) #tooltip.comparing .tipHead>img{width:28px!important;height:28px!important}
html:not(.qoTouch) #tooltip.comparing div[style*="justify-content:space-between"],html:not(.qoTouch) #tooltip.comparing .biRow{display:flex!important;justify-content:space-between!important;flex-wrap:nowrap;gap:8px!important;padding:1px 0}
html:not(.qoTouch) #tooltip.comparing div[style*="display:flex"]:not([style*="space-between"]){justify-content:flex-start!important}
html:not(.qoTouch) #tooltip.comparing .tipCompare{padding-left:12px}
html:not(.qoTouch) #tooltip.comparing .biBox{margin-top:4px;padding:4px 7px}
html:not(.qoTouch) #tooltip.comparing .biHd{margin:0 0 2px}
html:not(.qoTouch) #tooltip.comparing [style*="margin-top:6px"],html:not(.qoTouch) #tooltip.comparing [style*="margin-top:7px"],html:not(.qoTouch) #tooltip.comparing [style*="margin-top:8px"]{margin-top:4px!important}
html:not(.qoTouch) #tooltip.comparing [style*="padding:5px 8px"],html:not(.qoTouch) #tooltip.comparing [style*="padding:6px 8px"]{padding:3px 7px!important}
html:not(.qoTouch) #tooltip.comparing [style*="text-align:center"]{text-align:center}
@media(max-width:600px){#tooltip.comparing{grid-template-columns:minmax(0,1fr)}#tooltip.comparing .tipCompare{border-left:0;border-top:1px solid #7d8a9c44;padding:10px 0 0}}