[hidden]{display:none!important}body{margin:0}img{max-width:100%}

/* Fonts are served by the site itself (SIL Open Font License), not by Google Fonts: faster first
   paint, and no visitor data sent to a third party. Latin subset; Archivo is one variable file. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("font-archivo.woff2") format("woff2"); }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("font-marcellus.woff2") format("woff2"); }
@font-face { font-family: "Marcellus SC"; font-style: normal; font-weight: 400; font-display: swap; src: url("font-marcellus-sc.woff2") format("woff2"); }
/* A single dark look, on purpose: the game's own UI. Panels are in-game tooltips (navy-black, double
   silver/black border), titles are gold, text is warm parchment grey. */
:root {
  color-scheme: dark;
  --bg: #07080b; --panel: #0b0d17; --panel-2: #10131f; --panel-3: #161a27; --line: #262a36; --line-2: #3f4452; --frame: #5d6272;
  --text: #ece7da; --text-2: #b7b09f; --text-3: #847e6f;
  --gold: #ffd100; --gold-2: #c9a227; --gold-3: #6d5a1c; --parch: #f1e6c4; --focus: #ffd100;
  --mode-manual: #3f97cc; --mode-cd: #bd8019; --mode-pure: #d9577a; --mode-hl: #8d78e6;
  --ok: #1eff00; --ok-fill: #2fae3f; --bad: #ff4b4b; --warn: #ffb020; --epic: #b36bff;
  --q-gold: #e5cc80; --q-orange: #ff8000; --q-purple: #a335ee; --q-blue: #0070dd; --q-green: #1eff00; --q-grey: #9d9d9d;
  --fill-mix: 58%; --fill-base: #0b0d17; --row-shadow: 0 1px 1px #000, 0 0 2px #000;
  --c-death-knight: #C41E3A; --c-demon-hunter: #A330C9; --c-druid: #FF7C0A; --c-evoker: #33937F;
  --c-hunter: #AAD372; --c-mage: #3FC7EB; --c-monk: #00FF98; --c-paladin: #F48CBA; --c-priest: #FFFFFF;
  --c-rogue: #FFF468; --c-shaman: #0070DD; --c-warlock: #8788EE; --c-warrior: #C69B6D;
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Marcellus", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-sc: "Marcellus SC", "Marcellus", "Palatino Linotype", Georgia, serif;
}
* { box-sizing: border-box; }
body { color: var(--text); font: 400 15px/1.55 var(--font); -webkit-font-smoothing: antialiased;
  background: radial-gradient(1100px 520px at 50% -140px, #16203a 0%, rgb(22 32 58 / 0) 70%), var(--bg); background-attachment: fixed; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
code { font: 500 12.5px/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--text-2); overflow-wrap: anywhere; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 400; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Shell */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: linear-gradient(180deg, #11141f, #0a0c13); border-bottom: 1px solid #000; box-shadow: 0 1px 0 var(--gold-3); }
.top-in { max-width: 84rem; margin: 0 auto; padding-inline: 16px; height: 54px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 24px/1 var(--font-sc); color: var(--gold); text-shadow: 0 1px 0 #000, 0 0 12px rgb(255 209 0 / .15); }
.brand img, .brand svg { width: 30px; height: 30px; flex: none; border-radius: 3px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-3); }
.nav { display: flex; gap: 24px; font: 400 16px/1 var(--font-display); }
.nav a { text-decoration: none; color: var(--text-2); padding-block: 18px 15px; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--parch); }
.nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold-2); }
.discord-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 13px; border: 1px solid var(--gold-3); border-radius: 5px; background: #17170f; color: var(--gold); font: 500 13px/1.2 var(--font); text-decoration: none; white-space: nowrap; }
.discord-link:hover { background: #252112; border-color: var(--gold-2); color: var(--parch); }
.discord-link svg { width: 18px; height: 18px; flex: none; }
.top-in > .discord-link { margin-left: auto; }
@media (max-width: 640px) { .top-in { height: auto; flex-wrap: wrap; gap: 0 12px; padding-top: 10px; } .top-in > .discord-link { order: 1; } .top-in > .nav { order: 2; flex-basis: 100%; justify-content: center; gap: 28px; } .nav a { padding-block: 13px 11px; } }
@media (max-width: 520px) { .top-in { gap: 14px; } .brand { font-size: 19px; } .brand img, .brand svg { width: 24px; height: 24px; } .nav { flex-wrap: wrap; gap: 0 14px; font-size: 15px; } }
main { max-width: 84rem; margin: 0 auto; padding-inline: 16px; padding-block: 30px 60px; }
.page { display: grid; gap: 28px; }
.narrow { max-width: 60rem; margin-inline: auto; width: 100%; }
.foot { border-top: 1px solid #000; box-shadow: 0 -1px 0 var(--gold-3); color: var(--text-3); font-size: 13px; background: #090a10; }
.foot-in { max-width: 84rem; margin: 0 auto; padding-inline: 16px; padding-block: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
.community-footer { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.community-footer strong { display: block; margin-bottom: 5px; color: var(--parch); font: 400 20px/1.2 var(--font-display); }
.community-footer p { color: var(--text-2); line-height: 1.6; }

/* Type */
.eyebrow { font: 400 13px/1.2 var(--font-sc); letter-spacing: .08em; color: var(--gold-2); }
.h1 { font: 400 clamp(38px, 6vw, 66px)/1.02 var(--font-display); color: var(--parch); text-shadow: 0 2px 0 #000; max-width: 17ch; }
.h1-sm { font: 400 clamp(32px, 4.6vw, 48px)/1.05 var(--font-display); color: var(--parch); text-shadow: 0 2px 0 #000; }
.lede { font-size: 18px; line-height: 1.55; color: var(--text-2); max-width: 46rem; }
.lede strong { color: var(--text); font-weight: 600; }
.h2 { font: 400 22px/1.15 var(--font-display); color: var(--gold); text-shadow: 0 1px 0 #000; }
.sub { font-size: 13.5px; color: var(--text-3); }
.muted { color: var(--text-2); }
.small { font-size: 14px; }
.gold { color: var(--gold); }

/* Panels = in-game tooltips */
.card { position: relative; border-radius: 5px; min-width: 0; display: grid; gap: 14px; padding: 0 16px 16px; align-content: start;
  background: linear-gradient(180deg, rgb(17 21 38 / .97), rgb(8 10 19 / .97)); border: 1px solid var(--frame);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000, 0 14px 34px -16px #000; }
.card > .card-head:first-child, .card > .h2:first-child { margin-inline: -16px; }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; padding: 12px 16px 10px; position: relative; }
.card > .h2:first-child { padding: 12px 16px 10px; position: relative; }
.card-head::after, .card > .h2:first-child::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--gold-2), rgb(201 162 39 / 0) 75%); }
.card-head .sub, .card-head .label-line { font-size: 12.5px; }
.plain { background: none; border: 0; box-shadow: none; padding: 0; }
.plain > .card-head:first-child, .plain > .h2:first-child { margin-inline: 0; padding: 0 0 8px; }
.plain > .h2:first-child::after { left: 0; }
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 4px; padding: 10px 18px; font: 400 16px/1.2 var(--font-display); text-decoration: none; cursor: pointer;
  color: var(--gold); text-shadow: 0 1px 0 #000; background: linear-gradient(180deg, #9a1b12, #5c0e09); border: 1px solid var(--gold-2); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgb(255 255 255 / .12); }
.btn:hover { background: linear-gradient(180deg, #b32116, #6c110b); color: #fff2a8; }
.btn-ghost { color: var(--text); background: linear-gradient(180deg, #1c2130, #10131d); border-color: var(--frame); font-family: var(--font); font-size: 14.5px; font-weight: 600; }
.btn-ghost:hover { background: linear-gradient(180deg, #252b3d, #151926); color: var(--parch); }
.link { color: var(--text); text-decoration: underline; text-decoration-color: var(--gold-3); text-underline-offset: 3px; }
.link:hover { color: var(--gold); text-decoration-color: var(--gold-2); }

/* Filters */
.controls { display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: flex-end; }
.ctl { display: grid; gap: 5px; }
.ctl-label { font: 400 12.5px/1 var(--font-sc); letter-spacing: .08em; color: var(--text-3); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px 16px; border-bottom: 1px solid var(--line); }
.seg button { font: 500 14.5px/1 var(--font); color: var(--text-2); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 0 9px; cursor: pointer; white-space: nowrap; }
.seg button:hover:not(:disabled) { color: var(--parch); }
.seg button[aria-pressed="true"] { color: var(--gold); border-bottom-color: var(--gold-2); font-weight: 600; text-shadow: 0 0 10px rgb(255 209 0 / .25); }
.seg button:disabled { opacity: .35; cursor: not-allowed; }
.seg .dot { display: inline-block; width: 9px; height: 9px; border-radius: 1px; margin-right: 7px; box-shadow: 0 0 0 1px #000; }
.cls-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.cls-filter button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 4px; background: var(--panel-2); cursor: pointer; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--line-2); display: grid; place-items: center; font: 600 12px/1 var(--font); color: var(--text-2); }
.cls-filter button img { width: 100%; height: 100%; border-radius: 4px; display: block; filter: saturate(.55) brightness(.75); }
.cls-filter button:hover img { filter: none; }
.cls-filter button[aria-pressed="true"] { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--gold), 0 0 14px rgb(255 209 0 / .45); color: var(--gold); }
.cls-filter button[aria-pressed="true"] img { filter: none; }
.hint { font-size: 13.5px; color: var(--text-2); border-left: 2px solid var(--gold-3); padding: 2px 0 2px 12px; }
.hint svg { display: none; }
.label-line { font-size: 13px; color: var(--text-3); }
.label-line strong { color: var(--text-2); font-weight: 600; }

/* Icons: the game's square icon with a black bevel */
.badge { flex: none; width: 24px; height: 24px; border-radius: 3px; display: inline-grid; place-items: center; font: 400 14px/1 var(--font-display); background: var(--cls); color: #101216; box-shadow: 0 0 0 1px #000; }
.badge.lg { width: 60px; height: 60px; font-size: 28px; }
.badge.cls-death-knight, .badge.cls-demon-hunter, .badge.cls-shaman { color: #fff; }
.ic { position: relative; flex: none; width: 24px; height: 24px; display: inline-block; }
.ic > img { width: 100%; height: 100%; border-radius: 3px; display: block; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(255 255 255 / .12); }
.ic .cl { display: none; }
.ic.lg { width: 64px; height: 64px; }
.ic.lg > img { border-radius: 5px; box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--cls), 0 0 22px -4px var(--cls); }
.ic.lg .cl { display: block; position: absolute; right: -9px; bottom: -9px; width: 26px; height: 26px; border-radius: 4px; box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--gold-3); }
.spec-name { font-weight: 600; }
.hero { font-weight: 400; color: var(--text-2); }
.tag { display: inline-block; margin-left: 6px; padding: 0 5px; font: 600 10.5px/15px var(--font); letter-spacing: .05em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 3px; vertical-align: 1px; text-shadow: none; background: rgb(0 0 0 / .55); }
.tier-h { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font-size: 13px; font-weight: 600; } .tier-h:first-of-type { margin-top: 4px; }
.tier { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; font-family: var(--display, inherit); font-size: 16px; color: #0b0b0e; }
.tier-S { background: var(--q-orange); } .tier-A { background: var(--q-purple); color: #fff; } .tier-B { background: var(--q-blue); color: #fff; } .tier-C { background: var(--q-green); }
.tag-note { color: var(--warn); } .tag-fix { color: var(--epic); } .tag-bad { color: var(--bad); } .tag-ok { color: var(--ok); } .tag-good { color: var(--ok); }
.status { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.status .tag { margin: 0; font-size: 11.5px; line-height: 20px; padding: 0 7px; }

/* The meter */
.meter { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
@media (min-width: 1180px) { .meter.two { display: block; columns: 2; column-gap: 20px; } .meter.two li { margin-bottom: 2px; } }
.meter li { break-inside: avoid; }
.mrow { position: relative; display: grid; grid-template-columns: 2.1rem 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 4px; background: var(--panel-3); text-decoration: none; color: var(--text); overflow: hidden; box-shadow: inset 0 1px 0 rgb(255 255 255 / .03), inset 0 -1px 0 rgb(0 0 0 / .6); }
.mrow .fill { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: linear-gradient(180deg, color-mix(in srgb, var(--cls) calc(var(--fill-mix) + 10%), var(--fill-base)), color-mix(in srgb, var(--cls) calc(var(--fill-mix) - 8%), var(--fill-base))); }
.tank-def { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tank-def li { display: grid; grid-template-columns: 24px minmax(0, 14rem) minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14px; }
@media (max-width: 560px) { .tank-def li { grid-template-columns: 24px minmax(0, 1fr); } .tank-def li > .def-ic { grid-column: 2; } }
.def-ic { display: flex; flex-wrap: wrap; gap: 6px; }
.def-ic img { width: 28px; height: 28px; border-radius: 3px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(255 255 255 / .1); display: block; }
.mrow .tick { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; opacity: .7; }
.mrow .lost { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgb(200 40 50 / .42) 0 4px, rgb(200 40 50 / .16) 4px 8px); }
.mrow > :not(.fill):not(.tick):not(.lost) { position: relative; text-shadow: var(--row-shadow); }
.mrow .rk { text-align: right; font-size: 13px; font-weight: 700; color: var(--rk, var(--text)); }
.mrow .who { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
.mrow .hero { color: inherit; opacity: .82; }
.mrow .val { font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mrow .val small { font-weight: 600; opacity: .85; margin-left: 6px; font-size: 12.5px; }
a.mrow:hover, a.mrow:focus-visible { box-shadow: inset 0 0 0 1px var(--gold-2); }
.mrow.nr { opacity: .7; }
.nr-reason { font-size: 13px; color: var(--text-2); padding: 4px 4px 10px calc(2.1rem + 24px + 16px); }
@media (max-width: 560px) { .nr-reason { padding-left: 4px; } .mrow .hero { display: none; } }
.meter-foot { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12.5px; color: var(--text-3); }
.meter-foot .q { font-weight: 700; }
.tip { position: fixed; z-index: 50; pointer-events: none; background: linear-gradient(180deg, #11152a, #080a14); border: 1px solid var(--frame); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000; border-radius: 5px; padding: 9px 11px; font-size: 13px; min-width: 210px; max-width: 290px; }
.tip b { display: block; font-weight: 600; margin-bottom: 3px; color: #fff; }
.tip p { margin: 0; color: var(--text-2); line-height: 1.45; }
.nr-cell { cursor: help; border-bottom: 1px dotted var(--text-3); }
.tag-tip { cursor: help; }
.nr-cell:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
tr.dim td.num { color: var(--text-3); }
.tip div { display: flex; justify-content: space-between; gap: 12px; color: var(--gold); }
.tip div span:last-child { color: #fff; font-variant-numeric: tabular-nums; }

/* Diverging rows (talent advice) */
.div-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: center; min-height: 32px; text-decoration: none; padding: 0 4px; }
.div-row:hover, .div-row:focus-visible { background: var(--panel-2); }
.div-row .who { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
.div-track { position: relative; height: 18px; }
.div-track::before { content: ""; position: absolute; left: 50%; top: -7px; bottom: -7px; width: 1px; background: var(--line-2); }
.div-track i { position: absolute; top: 3px; height: 12px; box-shadow: 0 0 0 1px #000; }
.div-track .up { left: 50%; background: var(--ok-fill); }
.div-track .down { right: 50%; background: #b7303a; }
.div-track.one::before { left: 0; }
.div-track.one .up { left: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--cls) calc(var(--fill-mix) + 10%), var(--fill-base)), color-mix(in srgb, var(--cls) calc(var(--fill-mix) - 8%), var(--fill-base))); }
.div-track b { position: absolute; top: 0; font-size: 12.5px; font-weight: 700; line-height: 18px; font-variant-numeric: tabular-nums; }

/* Home: hero with the assistant's action button */
.hero-block { display: grid; gap: 28px; align-items: center; padding-block: 8px 0; }
@media (min-width: 980px) { .hero-block { grid-template-columns: minmax(0, 1fr) auto; } }
.hero-text { display: grid; gap: 16px; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; font-size: 14px; color: var(--text-3); }
.spellcard { display: flex; gap: 16px; align-items: flex-start; max-width: 25rem; }
.actionbtn { position: relative; flex: none; width: 88px; height: 88px; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--gold-3), 0 0 34px -6px rgb(255 209 0 / .45); }
.actionbtn img { width: 100%; height: 100%; display: block; }
.actionbtn .key { position: absolute; top: 3px; right: 6px; font: 700 17px/1 var(--font); color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
@property --p { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.actionbtn .sweep { position: absolute; inset: 0; background: conic-gradient(transparent var(--p), rgb(0 0 0 / .66) var(--p)); animation: gcd 1.875s linear infinite; }
@keyframes gcd { from { --p: 0deg; } to { --p: 360deg; } }
@media (prefers-reduced-motion: reduce) { .actionbtn .sweep { animation: none; --p: 250deg; } }
.wowtip { background: linear-gradient(180deg, #11152a, #080a14); border: 1px solid var(--frame); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000; border-radius: 5px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; display: grid; gap: 3px; }
.wowtip .t { color: #fff; font-size: 15px; font-weight: 600; }
.wowtip .w { color: #fff; }
.wowtip .y { color: var(--gold); }
.wowtip .g { color: var(--ok); }
.two-col { display: grid; gap: 20px 24px; }
.two-col > *, .talent-box > * { min-width: 0; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }
.col-title { font: 400 17px/1.2 var(--font-display); color: var(--parch); margin-bottom: 8px; }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; grid-template-columns: minmax(0, 1fr); }
.mini .val { white-space: nowrap; }
@media (max-width: 560px) { .mini .hero { display: none; } }
.mini { display: flex; align-items: center; gap: 8px; padding: 4px; text-decoration: none; }
.mini:hover, .mini:focus-visible { background: var(--panel-2); }
.mini .who { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14.5px; }
.mini .val { font-weight: 600; font-size: 14px; }
.modes { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.mode-card { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; }
.mode-card .h2 { font-size: 19px; color: var(--parch); }
.mode-card p { grid-column: 2; }
.mode-ic { grid-row: span 2; position: relative; width: 44px; height: 44px; border-radius: 5px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--line-2); display: grid; place-items: center; background: var(--panel-2); color: var(--m); }
.mode-ic img { width: 100%; height: 100%; border-radius: 5px; display: block; }
.mode-ic svg { width: 26px; height: 26px; }
.mode-ic.glow { box-shadow: 0 0 0 1px #000, 0 0 0 3px #ffe066, 0 0 16px 2px rgb(255 214 70 / .75); }
@media (prefers-reduced-motion: no-preference) { .mode-ic.glow { animation: proc 1.4s ease-in-out infinite; } }
@keyframes proc { 50% { box-shadow: 0 0 0 1px #000, 0 0 0 3px #fff3a6, 0 0 24px 5px rgb(255 214 70 / .95); } }
.mode-ic .mini-cd { position: absolute; inset: 0; border-radius: 5px; background: conic-gradient(transparent 250deg, rgb(0 0 0 / .66) 250deg); }
.mode-ic .off { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; background: #1a0d0d; box-shadow: 0 0 0 1px #000; display: grid; place-items: center; color: var(--bad); font: 700 12px/1 var(--font); }

/* Compare */
.spec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.spec-head .titles { display: grid; gap: 4px; min-width: 0; }
.spec-head .titles .muted { font: 400 18px/1.2 var(--font-display); color: var(--gold-2); }
.spec-pick { display: grid; gap: 5px; margin-left: auto; min-width: min(100%, 18rem); }
select { font: 500 14.5px/1.2 var(--font); color: var(--text); background: var(--panel-2); border: 1px solid var(--frame); box-shadow: 0 0 0 1px #000; border-radius: 4px; padding: 8px 10px; width: 100%; }
.big-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.big-stat .n { font: 400 68px/.9 var(--font-display); color: var(--gold); text-shadow: 0 2px 0 #000, 0 0 24px rgb(255 209 0 / .25); }
.notes { display: grid; gap: 10px; }
.note { border-left: 3px solid var(--line-2); padding: 2px 0 2px 12px; font-size: 14px; display: grid; gap: 3px; }
.note.bad { border-left-color: var(--bad); } .note.warn { border-left-color: var(--warn); } .note.patch { border-left-color: var(--epic); } .note.info { border-left-color: var(--mode-manual); }
.note strong { font-weight: 600; color: var(--parch); }
.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font: 400 12.5px/1.2 var(--font-sc); color: var(--text-3); letter-spacing: .06em; }
th:first-child, td:first-child { text-align: left; white-space: normal; min-width: 12rem; padding-left: 0; }
td small { display: block; color: var(--text-3); font-size: 12px; }
tfoot td { font-weight: 700; border-bottom: 0; color: var(--parch); }
.pos { color: var(--ok); } .neg { color: var(--bad); }
.ab { display: flex; align-items: center; gap: 9px; }
.ab img, .ab .ab-none { flex: none; width: 24px; height: 24px; border-radius: 3px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgb(255 255 255 / .1); }
.ab .ab-none { background: var(--panel-3); }
.ab-bars { display: grid; gap: 2px; width: 100%; max-width: 16rem; margin-top: 4px; }
.ab-bars i { display: block; height: 4px; }
.note .ab img { width: 20px; height: 20px; }
.talent-box { display: grid; gap: 6px; }
.tal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.tal-row:last-child { border-bottom: 0; padding-bottom: 0; }
.tal-row .gain { font-size: 14px; font-weight: 600; white-space: nowrap; }
.tal-row .talent-str { grid-column: 1 / -1; }
.tal-row .talent-str code { font-size: 12.5px; padding: 7px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .tal-row { grid-template-columns: minmax(0, 1fr); } .tal-row .talent-str code { flex-basis: 10rem; } .tal-row .mini .hero { display: inline; } }
.talent-str { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.talent-str code { flex: 1 1 18rem; min-width: 0; background: #06070c; border: 1px solid var(--line-2); border-radius: 3px; padding: 9px 11px; user-select: all; }
.verdict { font-size: 17px; font-weight: 600; color: var(--parch); }
.verdict .pos, .verdict .neg { font-weight: 700; }
.verdict-box { border-left: 3px solid var(--ok); padding: 6px 0 6px 12px; background: linear-gradient(90deg, rgb(30 255 0 / .08), transparent 70%); }
.verdict-box.even { border-left-color: var(--line-2); background: none; }
.mrow.build .val small { font-weight: 700; }
.mrow.win { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cls) 70%, transparent); }
tr.win-row td { background: linear-gradient(90deg, rgb(30 255 0 / .07), transparent 80%); }
tr.win-row td:first-child { box-shadow: inset 3px 0 0 var(--ok); padding-left: 10px; }
.talent-box.win code { border-color: rgb(30 255 0 / .6); box-shadow: inset 3px 0 0 var(--ok); }
dl.opts { display: grid; gap: 10px; margin: 0; }
dl.opts dt { font-weight: 600; font-size: 14px; color: var(--parch); }
dl.opts dd { margin: 0; }
.facts { display: grid; gap: 8px 24px; margin: 0; font-size: 14.5px; }
@media (min-width: 640px) { .facts { grid-template-columns: 10rem 1fr; } }
.facts dt { color: var(--text-3); }
.facts dd { margin: 0; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; font-size: 14.5px; color: var(--text-2); }
.plist li { display: grid; gap: 4px; }
.cls-h { display: flex; align-items: center; gap: 10px; }
.cls-h img { width: 28px; height: 28px; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-3); }
.faq { display: grid; gap: 6px; max-width: 60rem; }
.faq details { border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.faq summary { cursor: pointer; padding: 11px 14px; font: 400 17px/1.3 var(--font-display); color: var(--parch); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; display: inline-block; width: 1.2em; color: var(--gold); }
.faq details[open] summary::before { content: "−"; }
.faq details[open] summary { color: var(--gold); }
.faq details p { padding: 0 14px 13px calc(14px + 1.2em); color: var(--text-2); font-size: 15px; max-width: 70ch; }
.loading { color: var(--text-3); padding-block: 40px; }
/* Real dungeons */
.rd-list { gap: 3px; }
.rd-sum { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 25rem; align-items: center; gap: 4px 14px; cursor: pointer; }
.rd-sum::-webkit-details-marker { display: none; }
.rd-sum:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rd-bar { grid-template-columns: 24px minmax(0, 1fr) auto; padding-left: 8px; }
.rd-bar .val { font-size: 15px; }
.rd-side { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13.5px; }
.rd-side .tag { margin-left: 0; }
.rd-tal { text-decoration: none; color: var(--text-2); }
details[open] > .rd-sum .rd-bar { box-shadow: inset 0 0 0 1px var(--gold-3); }
.rd-detail { display: grid; gap: 12px; padding: 12px 4px 16px; }
.rd-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 10px 20px; margin: 0; }
.rd-dl dt { font: 400 12.5px/1.2 var(--font-sc); color: var(--text-3); letter-spacing: .06em; }
.rd-dl dd { margin: 2px 0 0; }
.rd-dl dd.num { font-size: 18px; font-weight: 700; color: var(--parch); }
.rd-sim { display: grid; gap: 8px; }
.rd-gear { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 2px 20px; font-size: 13.5px; }
.rd-gear li { display: grid; grid-template-columns: 4.5rem 22px minmax(0, 1fr) auto; min-width: 0; gap: 8px; align-items: center; min-height: 26px; }
.rd-gear .gi { width: 22px; height: 22px; border-radius: 3px; border: 1px solid var(--line-2); display: block; }
.rd-gear .slot { color: var(--text-3); text-transform: capitalize; }
.rd-gear a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-howbox { padding-block: 12px; }
.rd-howbox summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.rd-howbox summary::-webkit-details-marker { display: none; }
.rd-howbox summary::before { content: "+"; color: var(--gold); width: 1em; font-size: 20px; line-height: 1; }
.rd-howbox details[open] summary::before { content: "−"; }
.rd-howbox summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rd-howbox summary .h2 { margin: 0; }
.rd-howbox details[open] > .rd-how { margin-top: 10px; }
.rd-howbox details > .sub { margin-top: 8px; }
.rd-how { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; color: var(--text-2); font-size: 14.5px; }
.rd-detail th:first-child, .rd-detail td:first-child { min-width: 0; }
.rd-how { grid-template-columns: minmax(0, 1fr); }
.rd-how > li { min-width: 0; }
.rd-how details { margin-top: 4px; }
.rd-how details summary { display: inline; font-size: 14px; }
.rd-how details summary::before { content: none; }
.rd-pre { max-width: 100%; max-height: 320px; overflow: auto; margin: 6px 0 0; padding: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; line-height: 1.4; white-space: pre; }
.rd-what { margin: 0; }
.rd-range { white-space: nowrap; }
.hr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hr-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hr-row .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hr-name { min-width: 0; }
.hr-cols { gap: 16px; }
.bp-head { display: flex; flex-wrap: wrap; gap: 12px 40px; margin-bottom: 12px; }
.bp-head > div { display: grid; gap: 2px; }
.bp-big { font-size: 40px; font-weight: 700; line-height: 1; }
.bp-near { color: var(--gold); font-weight: 700; }
@media (max-width: 640px) { .rd-sum { grid-template-columns: minmax(0, 1fr); } .rd-side { padding: 0 4px 4px; } .rd-detail th, .rd-detail td { padding-inline: 6px; white-space: normal; } }
@media (prefers-reduced-motion: no-preference) { .mrow .fill { transition: width .35s ease; } }