/* Patch notes: the Blizzard-style reading layout and the in-game tooltip.
   Shared by patchnotes.html and admin-patchnotes.html; uses their tokens. */
:root{ --c-barbarian:#e8795a; --c-wizard:#b890f2; --tt-green:#3ee83e; --tt-tan:#c7b377; --tt-red:#ff3b30; }

/* ---------- reading layout ---------- */
.pn{font-size:16.5px;line-height:1.6;color:var(--text2)}
.pn p{margin:0 0 14px}
.pn .pn-h1{font-family:var(--display);font-size:30px;color:var(--text);margin:36px 0 12px}
.pn .pn-h2{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);
  margin:44px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--bronze);position:relative;scroll-margin-top:84px}
.pn .pn-h2::after{content:"";position:absolute;left:0;bottom:-1px;width:120px;height:1px;background:linear-gradient(90deg,var(--emberHi),transparent)}
.pn > .pn-h2:first-child{margin-top:8px}
.pn .pn-h3{font-family:var(--display);font-weight:700;font-size:21px;color:var(--text);margin:30px 0 10px;display:flex;align-items:center;gap:12px;scroll-margin-top:84px}
.pn .pn-h3.pn-class{font-size:24px}
.pn .pn-crest{width:34px;height:34px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;border:1px solid currentColor;background:var(--panel2)}
.pn .pn-h3.pn-c-barbarian{color:var(--c-barbarian)}
.pn .pn-h3.pn-c-wizard{color:var(--c-wizard)}
.pn .pn-h4{font-family:var(--body);font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:22px 0 8px}
.pn .pn-ul{margin:0 0 12px;padding-left:22px}
.pn .pn-ul .pn-ul{margin:4px 0 6px;padding-left:22px}
.pn .pn-ul li{margin:5px 0}
.pn .pn-ul > li::marker{color:var(--gold)}
.pn .pn-ul .pn-ul > li::marker{color:var(--dim);content:"– "}
.pn strong{color:var(--text)}
.pn code{font-family:ui-monospace,Consolas,monospace;font-size:14px;color:var(--gold2);background:var(--inset);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
.pn blockquote{margin:16px 0;padding:10px 16px;border-left:3px solid var(--bronze);color:var(--text)}
.pn .pn-dev{margin:14px 0 18px;padding:12px 16px 12px 18px;border-left:3px solid var(--gold);background:linear-gradient(90deg,rgba(201,164,92,.10),transparent 80%);
  border-radius:0 8px 8px 0;font-style:italic;color:#d9c9a3}
.pn .pn-dev-l{display:block;font-style:normal;font-weight:800;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}

/* skill, rune and passive names: a link with its tooltip */
.pn-ref{font-weight:700;color:var(--gold2);cursor:help;text-decoration:underline dotted rgba(226,192,126,.5);text-underline-offset:3px;border-radius:3px}
.pn-ref:hover,.pn-ref:focus-visible{color:#fff;text-decoration-color:var(--gold2)}
.pn-ref.pn-rune{color:#e7cf9a}
.pn-ref.pn-passive{color:#d8c49a}
.pn-val{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.pn-bad{color:var(--red);background:rgba(240,160,143,.08);border:1px dashed #a8483a;border-radius:4px;padding:0 4px;font-family:ui-monospace,Consolas,monospace;font-size:.88em}

/* ---------- the tooltip: laid out like the in-game skill tooltip ---------- */
.pn-tip{position:fixed;z-index:100;width:340px;max-width:calc(100vw - 20px);background:#050403;border:1px solid #5a4a36;border-radius:4px;
  box-shadow:0 0 0 1px #000,0 12px 32px rgba(0,0,0,.8);color:#fff;font-family:var(--body);font-size:14.5px;line-height:1.4;
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .12s,transform .12s,visibility 0s linear .12s;pointer-events:none}
.pn-tip.on{opacity:1;visibility:visible;transform:none;transition:opacity .12s,transform .12s}
.tt-head{padding:9px 12px 8px;text-align:center;background:linear-gradient(180deg,#6a0c0c 0%,#3a0505 55%,#1a0202 100%);border-bottom:1px solid #5a4a36}
.tt-name{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.tt-sub{font-size:13px;color:#c9c0b2;margin-top:2px}
.tt-body{display:flex;gap:12px;padding:12px}
.tt-icon{width:52px;height:52px;flex-shrink:0;border:1px solid #6b5a42;border-radius:3px;background:radial-gradient(circle at 50% 40%,#5a2a12,#1a0c06);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:22px;color:var(--gold2)}
.tt-text{flex:1;min-width:0}
.tt-text p{margin:0 0 8px}
.tt-text p:last-child{margin-bottom:0}
.tt-res span:first-child{color:var(--tt-tan)}
.tt-v{color:var(--tt-green)}
.tt-miss{color:var(--tt-red)}
.tt-flavor{padding:0 12px 10px;font-style:italic;color:var(--tt-tan);font-size:13.5px}
.tt-foot{padding:8px 12px 9px;border-top:1px solid #3a3024;color:var(--tt-red);font-size:13.5px}
@media (prefers-reduced-motion:reduce){.pn-tip{transition:none}}