/* Game chrome shared by every WowTool.tips page: spec and spell icons,
   class-coloured names, character portraits and the hover tooltip that
   /assets/wow.js fills from the proxy. Tokens come from wt.css. */

.wt-ico{display:inline-block;width:20px;height:20px;border-radius:3px;vertical-align:middle;margin-top:-3px;margin-right:6px;
  border:1px solid #000;box-shadow:0 0 0 1px #34344f;background:#000;object-fit:cover;flex:none}
.wt-ico-none{display:inline-block;background:linear-gradient(135deg,#2a2a44,#151526)}
.wt-spec{display:inline;white-space:nowrap;max-width:100%}
.wt-spec .wt-cls{font-weight:600}
.wt-spell{display:inline;color:inherit;text-decoration:none;max-width:100%}
.wt-npc{border-bottom-style:dashed}
.wt-boss{width:26px;height:26px;border-radius:50%;vertical-align:-8px;margin-right:8px;border:1px solid #000;box-shadow:0 0 0 1px var(--fel-dim);object-fit:cover;display:inline-block}
.wt-boss.lg{width:34px;height:34px;vertical-align:-11px}
a.wt-spell{border-bottom:1px dotted rgba(230,230,238,.28);cursor:help}
a.wt-spell:hover{border-bottom-color:var(--fel)}
a.wt-spell:hover .wt-name{color:var(--fel)}
.wt-name{white-space:normal}

/* Character portrait, with the spec icon as a corner badge once the picture arrives. */
.wt-face{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:4px;border:1px solid #000;box-shadow:0 0 0 1px var(--border-2);background:#0b0b16;flex:none;vertical-align:middle;overflow:visible}
.wt-face>img{width:100%;height:100%;object-fit:cover;margin:0;border:0;box-shadow:none;border-radius:3px;display:block}
.wt-face .wt-badge{position:absolute;right:-5px;bottom:-5px;width:16px;height:16px;line-height:0}
.wt-face .wt-badge img{width:16px;height:16px;margin:0;vertical-align:0;border-radius:2px}
.wt-face.sm{width:26px;height:26px} .wt-face.sm .wt-badge{width:12px;height:12px;right:-4px;bottom:-4px} .wt-face.sm .wt-badge img{width:12px;height:12px}
.wt-face.lg{width:64px;height:64px;border-radius:6px} .wt-face.lg .wt-badge{width:22px;height:22px;right:-6px;bottom:-6px} .wt-face.lg .wt-badge img{width:22px;height:22px}
.wt-face.xl{width:96px;height:96px;border-radius:8px} .wt-face.xl .wt-badge{width:28px;height:28px;right:-8px;bottom:-8px} .wt-face.xl .wt-badge img{width:28px;height:28px}
.wt-face-fallback>img{width:20px;height:20px;border-radius:3px}
.wt-faces{display:flex;flex-wrap:wrap;gap:10px 8px;align-items:center}
.wt-who{display:inline-flex;align-items:center;gap:10px;min-width:0}
.wt-who .wt-cls{font-weight:700}
.wt-who small{display:block;font-weight:400;color:var(--muted);font-size:12px}

/* Hover tooltip. Wowhead's own markup goes inside .wt-tip-body, so the
   table reset here has to beat the page's table styles. */
.wt-tip{position:absolute;z-index:9999;max-width:min(360px,calc(100vw - 16px));background:#07070f;border:1px solid #3a3a55;
  border-radius:4px;box-shadow:0 14px 36px rgba(0,0,0,.65),0 0 0 1px #000;font-family:var(--font);font-size:13px;line-height:1.38;color:#e6e6ee}
.wt-tip-body{padding:10px 12px;overflow-wrap:anywhere}
.wt-tip-loading{color:var(--muted);font-style:italic}
.wt-tip-muted{color:var(--muted);font-size:12px;margin-top:4px}
.wt-tip table{border-collapse:collapse;width:100%;min-width:0;max-width:100%;table-layout:auto;background:none;margin:0;font-size:13px}
.wt-tip td,.wt-tip th{padding:0;border:0;background:none;font-size:13px;line-height:1.38;text-align:left;vertical-align:top;color:inherit;
  white-space:normal;font-weight:400;text-transform:none;letter-spacing:0;position:static;min-width:0}
.wt-tip th{text-align:right;white-space:nowrap;padding-left:12px}
.wt-tip tr:hover td{background:none}
.wt-tip .q{color:#fff} .wt-tip .q0{color:#9d9d9d} .wt-tip .q1{color:#fff} .wt-tip .q2{color:#1eff00} .wt-tip .q3{color:#0070dd}
.wt-tip .q4{color:#a335ee} .wt-tip .q5{color:#ff8000} .wt-tip .q6{color:#e6cc80} .wt-tip .q7{color:#00ccff} .wt-tip .q8{color:#00ccff}
.wt-tip .whtt-name,.wt-tip b.q,.wt-tip b[class^="q"]{font-size:15px;font-weight:700;font-family:var(--display);letter-spacing:.01em}
.wt-tip a{color:inherit;text-decoration:none}
.wt-tip .wowhead-tooltip-requirements{color:#ff5050}
.wt-tip .wt-tip-icon{float:right;width:44px;height:44px;margin:0 0 6px 10px;border:1px solid #000;box-shadow:0 0 0 1px #3a3a55;border-radius:3px}
.wt-tip-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;border-top:1px solid #22223a;
  background:#0d0d19;color:var(--fel);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;font-weight:700}
.wt-tip-foot:hover{background:#12121f}
.wt-tip-foot .wt-tip-arrow{color:var(--fel-dim)}
@media (max-width:640px){
  .wt-face{width:32px;height:32px}
  .wt-face.lg{width:52px;height:52px}
  .wt-face.xl{width:72px;height:72px}
}

/* NPC faces: a crop of the Wowhead model-viewer render (300x300, full body,
   transparent). The head sits in the top quarter of nearly every render, so
   a 2.4x zoom anchored just below the top edge reads as a face; the hover
   tooltip shows the whole model. Registered per page through WT.faces(). */
.wt-mob{position:relative;display:inline-block;width:22px;height:22px;border-radius:50%;overflow:hidden;vertical-align:middle;
  margin:-3px 6px 0 0;background:radial-gradient(circle at 50% 35%,#2a2a44,#0d0d1a);border:1px solid #3a3a55;box-shadow:0 0 0 1px rgba(0,0,0,.4);flex:none}
.wt-mob>img{position:absolute;left:50%;top:0;width:52px;height:52px;max-width:none;margin:0;border:0;display:block;transform:translate(-50%,-4%)}
.wt-mob.lg{width:34px;height:34px;margin:0 8px 0 0} .wt-mob.lg>img{width:80px;height:80px}
.wt-mob-none{display:none}
.wt-tip-render{float:right;width:120px;height:120px;max-width:none;margin:-6px -8px 4px 10px;display:block;border:0;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.wt-tip-with-render{min-height:120px}
.wt-spell .wt-mob{margin-right:6px}
/* Encounter Journal portrait inside a boss npc tooltip (Wowhead's own markup, image now proxied). */
.wt-tip .wowhead-tooltip-npc-graphic img{display:block;max-width:220px;height:auto;margin:0 auto 8px;border-radius:6px}
.wt-tip .wowhead-tooltip-npc-graphic td{text-align:center}
.wt-boss-ph{display:none}