/* ============================================================================
   WoW Meta boards (PvP + Mythic+) — dark "arena terminal" design.
   Loaded only on the two meta page templates. Scope: .wm-page / .wm-*.
   ========================================================================== */

/* Paint the page body dark so the footer's 64px top margin doesn't flash white
   on these otherwise-light-themed templates. Scoped via the wm-dark body class. */
body.wm-dark { background: #0C0E1E; }

.wm-page {
	--wm-bg:       #0C0E1E;
	--wm-bg-2:     #12142A;
	--wm-panel:    rgba(255,255,255,.04);
	--wm-panel-2:  rgba(255,255,255,.06);
	--wm-border:   rgba(255,255,255,.09);
	--wm-border-2: rgba(255,255,255,.16);
	--wm-text:     #EDEEF5;
	--wm-muted:    #9096B0;
	--wm-dim:      #6A7091;
	--wm-green:    #00E28C;
	--wm-green-2:  #00B67A;
	--wm-s: linear-gradient(135deg,#F7CF52,#E0942B);
	--wm-a: linear-gradient(135deg,#B77CF9,#7C3AED);
	--wm-b: linear-gradient(135deg,#57A8FF,#2563EB);
	--wm-c: linear-gradient(135deg,#8A93B4,#565D7E);
	background:
		radial-gradient(1200px 460px at 50% -12%, rgba(0,182,122,.09), transparent 64%),
		var(--wm-bg);
	color: var(--wm-text);
}
.wm-page ::selection { background: rgba(0,226,140,.28); }
.wm-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.wm-hero { padding: 54px 0 26px; position: relative; }
.wm-back { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--wm-muted);
	font-weight:600; letter-spacing:.01em; margin-bottom:22px; }
.wm-back:hover { color: var(--wm-green); }
.wm-eye { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
	text-transform:uppercase; letter-spacing:.11em; color:var(--wm-muted);
	background: var(--wm-panel); border:1px solid var(--wm-border);
	padding:5px 11px; border-radius:8px; }
.wm-eye .wm-dot { width:6px; height:6px; border-radius:50%; background:var(--wm-green-2); }
.wm-hero h1 { font-family:var(--font-head); font-weight:800; letter-spacing:-.03em; color:#fff;
	font-size:clamp(34px,5.4vw,58px); line-height:1.02; margin:.34em 0 .28em; }
.wm-hero h1 em { font-style:normal; color:var(--wm-green-2); }
.wm-lead { font-size:clamp(15px,1.7vw,18px); color:var(--wm-muted); max-width:620px; line-height:1.6; }
.wm-src { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.wm-src span { font-size:12px; font-weight:600; color:var(--wm-muted);
	background:var(--wm-panel); border:1px solid var(--wm-border); padding:6px 12px; border-radius:8px; }
.wm-src span b { color:var(--wm-text); font-weight:700; }

/* ── Sticky controls ──────────────────────────────────────────────────── */
.wm-controls { position:sticky; top:var(--header-h); z-index:20; padding:12px 0;
	margin:26px 0 0; background:rgba(12,14,30,.82); backdrop-filter:blur(14px);
	border-top:1px solid var(--wm-border); border-bottom:1px solid var(--wm-border); }
.wm-controls__row { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.wm-seg { display:inline-flex; gap:4px; padding:4px; background:var(--wm-panel);
	border:1px solid var(--wm-border); border-radius:14px; }
.wm-seg button { appearance:none; border:0; background:transparent; cursor:pointer;
	font-family:var(--font); font-size:13.5px; font-weight:700; color:var(--wm-muted);
	padding:8px 16px; border-radius:10px; transition:.16s; letter-spacing:.01em; white-space:nowrap; }
.wm-seg button:hover { color:var(--wm-text); }
.wm-seg button.is-on { color:#04140D; background:var(--wm-green-2); box-shadow:0 2px 10px rgba(0,182,122,.2); }
.wm-seg--region button.is-on { background:linear-gradient(180deg,#fff,#DDE3EE); color:#0C0E1E; box-shadow:0 4px 14px rgba(0,0,0,.3); }
.wm-seg__lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.12em;
	color:var(--wm-dim); margin-right:2px; }
.wm-spacer { flex:1 1 auto; }
.wm-rating-hint { font-size:12px; color:var(--wm-dim); font-style:italic; opacity:.8; }

/* ── Stat strip ───────────────────────────────────────────────────────── */
.wm-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:24px 0 8px; }
.wm-stat { background:var(--wm-panel); border:1px solid var(--wm-border); border-radius:16px; padding:16px 18px; }
.wm-stat__k { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--wm-dim); }
.wm-stat__v { font-family:var(--font-head); font-weight:800; font-size:26px; color:#fff; margin-top:4px; letter-spacing:-.02em; }
.wm-stat__v small { font-size:14px; color:var(--wm-muted); font-weight:600; }

/* ── Tier board ───────────────────────────────────────────────────────── */
.wm-board { margin:26px 0 10px; display:flex; flex-direction:column; gap:14px; }
.wm-tier { display:grid; grid-template-columns:88px 1fr; gap:16px; align-items:stretch;
	background:var(--wm-panel); border:1px solid var(--wm-border); border-radius:20px; padding:14px;
	opacity:0; transform:translateY(8px); animation:wm-rise .4s forwards; }
.wm-tier:nth-child(1){animation-delay:.02s}.wm-tier:nth-child(2){animation-delay:.08s}
.wm-tier:nth-child(3){animation-delay:.14s}.wm-tier:nth-child(4){animation-delay:.2s}
@keyframes wm-rise { to { opacity:1; transform:none; } }
.wm-medal { display:flex; flex-direction:column; align-items:center; justify-content:center;
	border-radius:14px; color:#0C0E1E; font-family:var(--font-head); font-weight:800; }
.wm-medal b { font-size:38px; line-height:1; letter-spacing:-.02em; }
.wm-medal span { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; opacity:.72; margin-top:3px; }
.wm-medal--S{background:var(--wm-s)}.wm-medal--A{background:var(--wm-a)}
.wm-medal--B{background:var(--wm-b)}.wm-medal--C{background:var(--wm-c)}
.wm-specs { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:10px; }
.wm-tier--empty .wm-specs { align-items:center; }
.wm-empty { color:var(--wm-dim); font-size:13px; font-weight:600; padding:14px; }

/* ── Spec card ────────────────────────────────────────────────────────── */
.wm-spec { position:relative; display:flex; align-items:center; gap:11px; padding:10px 12px;
	background:var(--wm-panel-2); border:1px solid var(--wm-border); border-left:3px solid var(--cc,#888);
	border-radius:12px; overflow:hidden; transition:.16s; }
.wm-spec:hover { border-color:var(--wm-border-2); transform:translateY(-2px);
	background:rgba(255,255,255,.08); }
.wm-spec__ico { width:40px; height:40px; border-radius:9px; flex:0 0 auto; display:block;
	border:1px solid rgba(255,255,255,.14); box-shadow:0 2px 8px rgba(0,0,0,.35); }
.wm-spec__mid { min-width:0; flex:1 1 auto; }
.wm-spec__nm { font-size:13.5px; font-weight:700; color:var(--wm-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wm-spec__nm b { color:var(--cc,#fff); }
.wm-spec__cls { font-size:11px; color:var(--wm-dim); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wm-spec__bar { height:5px; border-radius:4px; background:rgba(255,255,255,.08); margin-top:6px; overflow:hidden; }
.wm-spec__bar i { display:block; height:100%; border-radius:4px; background:var(--cc,#888); }
.wm-spec__pct { flex:0 0 auto; text-align:right; }
.wm-spec__pct b { font-family:var(--font-head); font-weight:800; font-size:16px; color:#fff; letter-spacing:-.02em; }
.wm-spec__pct span { display:block; font-size:10.5px; color:var(--wm-muted); font-weight:600; margin-top:1px; }
.wm-spec__rk { position:absolute; top:6px; right:8px; font-size:10px; font-weight:800; color:var(--wm-dim); }
a.wm-spec { text-decoration:none; color:inherit; }
a.wm-spec::after { content:"\2197"; position:absolute; bottom:8px; right:9px; font-size:11px; color:var(--wm-dim); opacity:0; transition:.16s; }
a.wm-spec:hover::after { opacity:.9; color:var(--cc,#fff); }

/* ── Full table ───────────────────────────────────────────────────────── */
.wm-tablewrap { margin:34px 0 8px; overflow-x:auto; border:1px solid var(--wm-border); border-radius:18px; background:var(--wm-panel); }
.wm-table { width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
.wm-table thead th { text-align:left; font-size:11px; font-weight:700; text-transform:uppercase;
	letter-spacing:.08em; color:var(--wm-dim); padding:14px 16px; border-bottom:1px solid var(--wm-border);
	white-space:nowrap; }
.wm-table thead th.wm-num { text-align:right; }
.wm-table tbody td { padding:11px 16px; border-bottom:1px solid rgba(255,255,255,.05); vertical-align:middle; }
.wm-table tbody tr:last-child td { border-bottom:0; }
.wm-table tbody tr:hover { background:rgba(255,255,255,.03); }
.wm-num { text-align:right; font-variant-numeric:tabular-nums; }
.wm-rankcell { color:var(--wm-dim); font-weight:700; width:44px; }
.wm-speccell { display:flex; align-items:center; gap:10px; }
.wm-speccell img { width:30px; height:30px; border-radius:7px; border:1px solid rgba(255,255,255,.12); }
.wm-speccell b { color:var(--cc,#fff); font-weight:700; }
.wm-speccell span { color:var(--wm-dim); font-size:12px; }
a.wm-speccell { text-decoration:none; }
a.wm-speccell:hover b { text-decoration:underline; }
.wm-tierbadge { display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center;
	border-radius:7px; font-family:var(--font-head); font-weight:800; font-size:13px; color:#0C0E1E; }
.wm-tierbadge--S{background:var(--wm-s)}.wm-tierbadge--A{background:var(--wm-a)}
.wm-tierbadge--B{background:var(--wm-b)}.wm-tierbadge--C{background:var(--wm-c)}
.wm-minibar { display:inline-block; width:52px; height:6px; border-radius:4px; background:rgba(255,255,255,.09); vertical-align:middle; margin-right:8px; overflow:hidden; }
.wm-minibar i { display:block; height:100%; background:var(--cc,#888); border-radius:4px; }

/* ── Prose sections (methodology / dungeons) ──────────────────────────── */
.wm-sec { margin:44px 0; }
.wm-sec h2 { font-family:var(--font-head); font-weight:800; color:#fff; font-size:clamp(22px,3vw,30px); letter-spacing:-.02em; margin:0 0 14px; }
.wm-sec p { color:var(--wm-muted); line-height:1.7; margin:0 0 12px; max-width:760px; }
.wm-sec a { color:var(--wm-green); font-weight:600; }
.wm-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:16px; }
.wm-dg { display:flex; align-items:center; gap:12px; background:var(--wm-panel); border:1px solid var(--wm-border); border-radius:14px; padding:12px 14px; }
.wm-dg img { width:44px; height:44px; border-radius:10px; border:1px solid rgba(255,255,255,.12); }
.wm-dg b { display:block; font-size:14px; color:var(--wm-text); font-weight:700; }
.wm-dg span { font-size:12px; color:var(--wm-dim); }

.wm-tierkey { display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; }
.wm-tierkey div { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--wm-muted); }
.wm-tierkey .wm-tierbadge { width:22px; height:22px; font-size:12px; }

/* ── FAQ accordion ────────────────────────────────────────────────────── */
.wm-faqlist { display:flex; flex-direction:column; gap:10px; max-width:820px; margin-top:16px; }
.wm-qa { background:var(--wm-panel); border:1px solid var(--wm-border); border-radius:14px; overflow:hidden; }
.wm-qa summary { cursor:pointer; display:block; list-style:none; padding:16px 46px 16px 18px; position:relative;
	font-family:var(--font-head); font-weight:700; font-size:15.5px; color:var(--wm-text); letter-spacing:-.01em; }
.wm-qa summary::-webkit-details-marker { display:none; }
.wm-qa summary::after { content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
	font-size:22px; font-weight:400; color:var(--wm-green); line-height:1; transition:transform .2s; }
.wm-qa[open] summary::after { content:"–"; }
.wm-qa summary:hover { color:#fff; }
.wm-qa__a { padding:0 18px 16px; color:var(--wm-muted); }
.wm-qa__a p { margin:0; line-height:1.65; }

/* ── CTA ──────────────────────────────────────────────────────────────── */
.wm-cta { margin:40px 0 60px; background:linear-gradient(180deg,rgba(0,182,122,.10),rgba(255,255,255,.015));
	border:1px solid var(--wm-border); border-radius:20px; padding:30px 28px; text-align:center; }
.wm-cta h2 { color:#fff; font-family:var(--font-head); font-weight:800; margin:0 0 8px; font-size:clamp(21px,2.6vw,28px); }
.wm-cta p { color:var(--wm-muted); margin:0 auto 18px; max-width:520px; }
.wm-cta a.wm-btn { display:inline-flex; align-items:center; gap:8px; background:var(--wm-green-2);
	color:#04140D; font-weight:800; font-size:15px; padding:13px 26px; border-radius:11px; transition:.16s;
	box-shadow:0 6px 18px rgba(0,182,122,.22); }
.wm-cta a.wm-btn:hover { transform:translateY(-2px); background:var(--wm-green); box-shadow:0 10px 24px rgba(0,182,122,.3); }

/* ── Sibling cross-link ───────────────────────────────────────────────── */
.wm-sibling { text-align:center; margin:0 0 60px; color:var(--wm-muted); font-size:15px; }
.wm-sibling a { color:var(--wm-green); font-weight:700; }
.wm-sibling a:hover { text-decoration:underline; }

/* ============================================================================
   Spec profile /wow-meta/<spec>/  +  hub index /wow-meta/
   ========================================================================== */

/* ── Profile hero ─────────────────────────────────────────────────────── */
.wm-phero h1 em { background:none; -webkit-text-fill-color:initial; color:inherit; }
.wm-phero h1 .wm-cc { color:var(--cc,#fff); }
.wm-pid { display:flex; align-items:center; gap:18px; margin:.2em 0 .1em; }
.wm-pid__ico { width:76px; height:76px; border-radius:16px; flex:0 0 auto; display:block;
	border:1px solid rgba(255,255,255,.16); box-shadow:0 8px 22px rgba(0,0,0,.45), 0 0 0 3px color-mix(in srgb, var(--cc,#888) 22%, transparent); }
.wm-phero h1 { margin:0; font-size:clamp(30px,4.6vw,50px); }
.wm-pid__tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.wm-ptag { font-size:12px; font-weight:700; color:var(--wm-muted);
	background:var(--wm-panel); border:1px solid var(--wm-border); padding:5px 11px; border-radius:72px; letter-spacing:.02em; }
.wm-ptag b { color:#fff; }
.wm-ptag--role { color:#04140D; background:linear-gradient(180deg,#fff,#DDE3EE);
	border-color:transparent; text-transform:uppercase; letter-spacing:.08em; font-size:11px; }

/* ── At-a-glance grid ─────────────────────────────────────────────────── */
.wm-ph2 { font-family:var(--font-head); font-weight:800; color:#fff; letter-spacing:-.02em;
	font-size:clamp(20px,2.6vw,26px); margin:38px 0 14px; }
.wm-glance-hint { color:var(--wm-muted); font-size:13.5px; line-height:1.55; margin:0 0 16px; max-width:680px; }
.wm-glance-hint b { color:var(--wm-text); }
.wm-glance { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.wm-gtile { background:var(--wm-panel); border:1px solid var(--wm-border); border-top:3px solid var(--tc,var(--cc,#888));
	border-radius:16px; padding:14px 16px 15px; min-height:150px; min-width:0; display:flex; flex-direction:column; }
.wm-gtile--S { --tc:#E0942B; } .wm-gtile--A { --tc:#7C3AED; }
.wm-gtile--B { --tc:#2563EB; } .wm-gtile--C { --tc:#565D7E; }
.wm-gtile--empty { --tc:var(--wm-border-2); opacity:.72; }
.wm-gtile__lbl { font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--wm-dim); }
.wm-gtile__top { display:flex; align-items:center; gap:11px; margin-top:11px; }
.wm-medal2 { flex:0 0 auto; width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
	font-family:var(--font-head); font-weight:800; font-size:22px; color:#0C0E1E; letter-spacing:-.02em; }
.wm-medal2--S{background:var(--wm-s)}.wm-medal2--A{background:var(--wm-a)}
.wm-medal2--B{background:var(--wm-b)}.wm-medal2--C{background:var(--wm-c)}
.wm-medal2--none{ background:var(--wm-panel-2); border:1px solid var(--wm-border); color:var(--wm-dim); }
.wm-gtile__read { display:flex; flex-direction:column; min-width:0; line-height:1.28; }
.wm-gtile__read b { font-family:var(--font-head); font-weight:800; font-size:16px; color:#fff; letter-spacing:-.01em; }
.wm-gtile__read i { font-style:normal; font-size:12px; color:var(--wm-muted); font-weight:600; }
.wm-gtile__bar { height:6px; border-radius:5px; background:rgba(255,255,255,.08); margin:13px 0 12px; overflow:hidden; }
.wm-gtile__bar i { display:block; height:100%; border-radius:5px; background:var(--cc,#888); }
.wm-gtile__metrics { display:flex; flex-wrap:wrap; gap:14px; }
.wm-gtile__metrics span { display:flex; flex-direction:column; line-height:1.2; }
.wm-gtile__metrics b { font-family:var(--font-head); font-weight:800; font-size:17px; color:var(--wm-text); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.wm-gtile__metrics i { font-style:normal; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--wm-dim); margin-top:2px; }
.wm-gtile__trend { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:12px; }
.wm-spark { width:96px; height:30px; flex:0 0 auto; overflow:visible; }
.wm-spark__area { fill:var(--cc,#00B67A); opacity:.14; }
.wm-spark__line { fill:none; stroke:var(--cc,#00B67A); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.wm-spark__dot { fill:var(--cc,#00B67A); }
.wm-tr { font-size:11.5px; font-weight:800; letter-spacing:.01em; white-space:nowrap; }
.wm-tr--up { color:var(--wm-green); }
.wm-tr--down { color:#FF6B7A; }
.wm-tr--flat { color:var(--wm-dim); }

/* ── Rising / falling movers block ────────────────────────────────────── */
.wm-movers { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.wm-movers__col { background:var(--wm-panel); border:1px solid var(--wm-border); border-radius:18px; padding:12px; display:flex; flex-direction:column; gap:7px; }
.wm-movers__hd { font-family:var(--font-head); font-weight:800; font-size:13px; color:var(--wm-text);
	display:flex; align-items:center; gap:8px; padding:4px 6px 9px; margin-bottom:1px;
	border-bottom:1px solid var(--wm-border); text-transform:uppercase; letter-spacing:.08em; }
.wm-mover { display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:12px;
	border-left:3px solid var(--cc,#888); background:var(--wm-panel-2); text-decoration:none; transition:.16s; }
.wm-mover:hover { background:rgba(255,255,255,.08); transform:translateX(2px); }
.wm-mover__ico { width:34px; height:34px; border-radius:8px; flex:0 0 auto; border:1px solid rgba(255,255,255,.14); }
.wm-mover__nm { flex:1 1 auto; min-width:0; font-size:13px; color:var(--wm-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wm-mover__nm b { color:var(--cc,#fff); font-weight:700; }
.wm-mover .wm-spark { width:60px; height:24px; flex:0 0 auto; }
.wm-mover__d { flex:0 0 auto; font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:.01em; }
.wm-movers-empty { color:var(--wm-muted); font-size:13.5px; font-weight:600; padding:18px; margin-top:16px;
	background:var(--wm-panel); border:1px dashed var(--wm-border-2); border-radius:14px; text-align:center; }
.wm-movers .wm-movers-empty { margin-top:0; }
@media (max-width:640px){ .wm-movers { grid-template-columns:1fr; } }

/* ── This week's affixes ──────────────────────────────────────────────── */
.wm-affixes { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin-top:16px; }
.wm-affix { display:flex; align-items:flex-start; gap:12px; background:var(--wm-panel); border:1px solid var(--wm-border); border-radius:14px; padding:13px 14px; }
.wm-affix__ico { width:44px; height:44px; border-radius:10px; flex:0 0 auto; border:1px solid rgba(255,255,255,.14); box-shadow:0 2px 8px rgba(0,0,0,.35); }
.wm-affix__t { min-width:0; }
.wm-affix__t b { display:block; font-size:14px; color:var(--wm-text); font-weight:700; margin-bottom:3px; }
.wm-affix__t span { font-size:12px; color:var(--wm-dim); line-height:1.5; }

/* ── CTA multi-button ─────────────────────────────────────────────────── */
.wm-cta__btns { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.wm-cta a.wm-btn--ghost { background:var(--wm-panel-2); color:var(--wm-text); border:1px solid var(--wm-border-2); box-shadow:none; }
.wm-cta a.wm-btn--ghost:hover { background:rgba(255,255,255,.1); transform:translateY(-2px); }

/* ── Beginner spec finder (quiz) ──────────────────────────────────────── */
.wm-quiz { max-width:640px; margin:2px auto 12px; }
.wm-quiz__in { animation:wm-qin .32s ease both; }
@keyframes wm-qin { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

/* drifting spec-icon strip (entice) */
.wm-qstrip { position:relative; overflow:hidden; margin:18px 0 4px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.wm-qstrip__track { display:flex; gap:10px; width:max-content; animation:wm-drift 42s linear infinite; }
.wm-qstrip img { width:44px; height:44px; border-radius:11px; border:1px solid rgba(255,255,255,.12);
	box-shadow:0 3px 10px rgba(0,0,0,.4), inset 0 0 0 2px color-mix(in srgb,var(--cc,#888) 45%, transparent); opacity:.85; }
@keyframes wm-drift { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){ .wm-qstrip__track{ animation:none } .wm-quiz__in{ animation:none } }

.wm-quiz__prog { height:7px; border-radius:5px; background:var(--wm-panel-2); overflow:hidden; margin-bottom:18px; }
.wm-quiz__prog i { display:block; height:100%; background:linear-gradient(90deg,var(--wm-green-2),var(--wm-green)); border-radius:5px; transition:width .35s cubic-bezier(.3,1,.4,1); }
.wm-quiz__step { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--wm-green-2); }
.wm-quiz__q { font-family:var(--font-head); font-weight:800; color:#fff; font-size:clamp(23px,3.6vw,32px); letter-spacing:-.02em; margin:7px 0 6px; }
.wm-quiz__help { color:var(--wm-muted); font-size:14px; line-height:1.5; margin:0 0 20px; }

.wm-quiz__opts { display:grid; gap:12px; }
.wm-quiz__opt { text-align:left; appearance:none; cursor:pointer; color:inherit; display:flex; align-items:center; gap:15px;
	background:var(--wm-panel); border:1px solid var(--wm-border); border-radius:15px; padding:15px 18px; transition:.18s; }
.wm-quiz__opt:hover { border-color:var(--wm-green-2); background:rgba(0,182,122,.07); transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.28); }
.wm-quiz__ic { flex:0 0 auto; width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
	background:var(--wm-panel-2); border:1px solid var(--wm-border); color:var(--wm-green-2); transition:.18s; }
.wm-quiz__opt:hover .wm-quiz__ic { background:rgba(0,182,122,.14); border-color:rgba(0,182,122,.4); transform:scale(1.06); }
.wm-quiz__ic svg { width:24px; height:24px; }
.wm-quiz__ot { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.wm-quiz__ot b { font-family:var(--font-head); font-weight:800; font-size:16.5px; color:#fff; }
.wm-quiz__ot span { font-size:13px; color:var(--wm-muted); }
.wm-quiz__arr { flex:0 0 auto; color:var(--wm-dim); font-size:18px; font-weight:800; opacity:0; transform:translateX(-4px); transition:.18s; }
.wm-quiz__opt:hover .wm-quiz__arr { opacity:1; transform:none; color:var(--wm-green-2); }
.wm-quiz__back { margin-top:16px; appearance:none; background:none; border:0; cursor:pointer; color:var(--wm-muted); font-weight:700; font-size:13.5px; }
.wm-quiz__back:hover { color:var(--wm-text); }

/* result reveal */
.wm-quiz__reveal { text-align:center; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:var(--wm-green-2); margin-bottom:14px; }
.wm-qhero { position:relative; display:flex; align-items:center; gap:18px; text-decoration:none; overflow:hidden;
	background:var(--wm-panel);
	background:linear-gradient(135deg, color-mix(in srgb,var(--cc) 18%, var(--wm-panel)), var(--wm-panel));
	border:1px solid var(--wm-border-2); border-radius:20px; padding:22px; }
.wm-qhero__glow { position:absolute; inset:-45% -12% auto auto; width:270px; height:270px; border-radius:50%;
	background:radial-gradient(circle, color-mix(in srgb,var(--cc) 55%, transparent), transparent 68%); opacity:.5; pointer-events:none; }
.wm-qhero__ico { position:relative; width:84px; height:84px; border-radius:18px; flex:0 0 auto;
	border:1px solid rgba(255,255,255,.2); box-shadow:0 10px 26px rgba(0,0,0,.5); box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 0 4px color-mix(in srgb,var(--cc) 30%, transparent); }
.wm-qhero__body { position:relative; min-width:0; flex:1 1 auto; }
.wm-qhero__nm { font-size:15px; color:var(--wm-muted); }
.wm-qhero__nm b { display:block; font-family:var(--font-head); font-weight:800; font-size:clamp(24px,4.4vw,33px); letter-spacing:-.02em; color:var(--cc,#fff); line-height:1.05; }
.wm-qhero__tiers { display:flex; align-items:center; gap:6px; margin-top:9px; font-size:12.5px; color:var(--wm-muted); font-weight:700; }
.wm-qhero__go { display:inline-block; margin-top:11px; font-size:13px; color:var(--wm-green-2); font-weight:800; }
.wm-qhero__medal { position:relative; flex:0 0 auto; width:52px; height:52px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:800; font-size:26px; color:#0C0E1E; }
.wm-quiz__also { margin:24px 0 11px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--wm-dim); }
.wm-quiz__cards { display:grid; gap:10px; }
.wm-qcard { position:relative; display:flex; align-items:center; gap:13px; text-decoration:none;
	background:var(--wm-panel); border:1px solid var(--wm-border); border-left:3px solid var(--cc,#888); border-radius:13px; padding:11px 15px; transition:.16s; }
.wm-qcard:hover { background:rgba(255,255,255,.05); transform:translateX(2px); }
.wm-qcard__ico { width:42px; height:42px; border-radius:10px; flex:0 0 auto; border:1px solid rgba(255,255,255,.14); box-shadow:0 2px 8px rgba(0,0,0,.35); }
.wm-qcard__mid { min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:2px; }
.wm-qcard__nm { font-size:13px; color:var(--wm-muted); }
.wm-qcard__nm b { color:var(--cc,#fff); font-family:var(--font-head); font-weight:800; font-size:15px; letter-spacing:-.01em; }
.wm-qcard__tiers { font-size:12px; color:var(--wm-dim); font-weight:700; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.wm-qcard__go { flex:0 0 auto; font-size:16px; color:var(--wm-dim); font-weight:800; }
.wm-qcard:hover .wm-qcard__go { color:var(--wm-green-2); }
.wm-quiz__cta { margin-top:22px; text-align:center; background:linear-gradient(180deg,rgba(0,182,122,.10),rgba(255,255,255,.015));
	border:1px solid var(--wm-border); border-radius:16px; padding:22px; }
.wm-quiz__cta p { color:var(--wm-muted); margin:0 auto 14px; max-width:430px; }
.wm-quiz .wm-btn { display:inline-flex; align-items:center; gap:8px; background:var(--wm-green-2); color:#04140D;
	font-weight:800; font-size:15px; padding:12px 24px; border-radius:11px; transition:.16s; box-shadow:0 6px 18px rgba(0,182,122,.22); }
.wm-quiz .wm-btn:hover { transform:translateY(-2px); background:var(--wm-green); }
.wm-quiz__restart { display:block; margin:18px auto 0; appearance:none; cursor:pointer; background:none; border:0; color:var(--wm-muted); font-weight:700; font-size:13.5px; }
.wm-quiz__restart:hover { color:var(--wm-text); }

/* ── Hub index ────────────────────────────────────────────────────────── */
.wm-pindex { display:flex; flex-direction:column; gap:24px; margin:28px 0 8px; }
.wm-pclass h2 { font-family:var(--font-head); font-weight:800; color:#fff; font-size:19px; letter-spacing:-.01em;
	margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid var(--wm-border); }
.wm-pspecs { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.wm-pchip { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:12px;
	background:var(--wm-panel-2); border:1px solid var(--wm-border); border-left:3px solid var(--cc,#888); transition:.16s; }
.wm-pchip:hover { background:rgba(255,255,255,.08); border-color:var(--wm-border-2); transform:translateY(-2px); }
.wm-pchip img { width:38px; height:38px; border-radius:9px; flex:0 0 auto; border:1px solid rgba(255,255,255,.14); box-shadow:0 2px 8px rgba(0,0,0,.35); }
.wm-pchip__t { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.wm-pchip__t b { color:var(--cc,#fff); font-weight:700; font-size:14px; }
.wm-pchip__t i { font-style:normal; color:var(--wm-dim); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:720px){
	.wm-stats { grid-template-columns:repeat(2,1fr); }
	.wm-tier { grid-template-columns:60px 1fr; gap:12px; padding:12px; }
	.wm-medal b { font-size:28px; }
	.wm-medal span { display:none; }
	.wm-specs { grid-template-columns:1fr; }
	.wm-controls__row { gap:10px; }
	.wm-seg button { padding:7px 12px; font-size:12.5px; }
	.wm-pid__ico { width:60px; height:60px; }
	.wm-glance { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ── Popular talent builds ────────────────────────────────────────────── */
.wm-builds__hint { color:var(--wm-muted); font-size:13.5px; line-height:1.55; margin:0 0 16px; max-width:680px; }
.wm-builds__grouph { display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:800;
	font-size:13.5px; text-transform:uppercase; letter-spacing:.07em; color:#fff; margin:24px 0 13px;
	padding:10px 13px; border-radius:12px; background:color-mix(in srgb, var(--gc,#888) 13%, var(--wm-panel));
	border:1px solid color-mix(in srgb, var(--gc,#888) 34%, transparent); border-left:4px solid var(--gc,#888); }
.wm-builds__grouph:first-of-type { margin-top:6px; }
.wm-builds__grouph .wm-bg-ico { display:inline-flex; color:var(--gc,#888); }
.wm-builds__grouph--pvp { --gc:#FF7A66; }
.wm-builds__grouph--pve { --gc:#43A5FF; }
.wm-builds__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.wm-build { background:var(--wm-panel); border:1px solid var(--wm-border); border-top:3px solid var(--cc,var(--wm-green));
	border-radius:14px; padding:13px 14px 14px; }
.wm-build__head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.wm-build__name { font-family:var(--font-head); font-weight:800; font-size:14px; color:#fff; letter-spacing:-.01em; }
.wm-build__pct { font-family:var(--font-head); font-weight:800; font-size:15px; color:var(--cc,var(--wm-green));
	font-variant-numeric:tabular-nums; }
.wm-build__row { display:flex; gap:8px; }
.wm-build__code { flex:1 1 auto; min-width:0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px;
	color:var(--wm-text); background:var(--wm-panel-2); border:1px solid var(--wm-border); border-radius:9px;
	padding:8px 10px; text-overflow:ellipsis; }
.wm-build__code:focus { outline:2px solid var(--cc,var(--wm-green)); outline-offset:0; }
.wm-build__copy { flex:0 0 auto; cursor:pointer; font-family:inherit; font-weight:800; font-size:12.5px; color:#04140D;
	background:var(--wm-green); border:0; border-radius:9px; padding:8px 15px; letter-spacing:.01em; transition:.14s; white-space:nowrap; }
.wm-build__copy:hover { filter:brightness(1.06); }
.wm-build__copy.is-done { background:var(--wm-panel-2); color:var(--wm-green); box-shadow:inset 0 0 0 1px var(--wm-border); }
.wm-builds__how { color:var(--wm-dim); font-size:12.5px; line-height:1.55; margin:14px 0 0; }
@media (max-width:640px){ .wm-builds__grid { grid-template-columns:1fr; } }

/* ── Talent-tree viewer (read-only build tree) ────────────────────────── */
.wm-treeview { margin:16px 0 4px; border:1px solid var(--wm-border); border-radius:14px; background:var(--wm-panel); overflow:hidden; }
.wm-treeview > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px; padding:12px 14px;
	font-family:var(--font-head); font-weight:800; font-size:12.5px; text-transform:uppercase; letter-spacing:.07em; color:#fff; }
.wm-treeview > summary::-webkit-details-marker { display:none; }
.wm-treeview__ic { display:inline-flex; color:var(--cc,var(--wm-green)); }
.wm-treeview > summary::after { content:"\25BE"; margin-left:auto; color:var(--wm-dim); transition:.2s transform; }
.wm-treeview[open] > summary::after { transform:rotate(180deg); }
.wm-treeview__in { padding:2px 14px 14px; }
.wm-treetabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.wm-treetab { cursor:pointer; font-family:inherit; font-weight:700; font-size:12.5px; color:var(--wm-muted);
	background:var(--wm-panel-2); border:1px solid var(--wm-border); border-radius:999px; padding:6px 13px; }
.wm-treetab.is-on { color:#04140D; background:var(--cc,var(--wm-green)); border-color:transparent; }
.wm-treepane { display:none; }
.wm-treepane.is-on { display:block; }
.wm-tree-set { display:flex; flex-direction:column; gap:18px; }
.wm-tpanel { overflow-x:auto; }
.wm-tpanel__lbl { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:var(--wm-dim); margin:0 0 8px; }
.wm-tree { position:relative; margin:0 auto; }
.wm-tree__links { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.wm-tl { stroke:var(--cc,#00B67A); stroke-width:2.5; opacity:.6; vector-effect:non-scaling-stroke; }
.wm-tl--on { stroke:var(--cc,#00B67A); stroke-width:2.5; opacity:.6; vector-effect:non-scaling-stroke; }
.wm-tnode { position:absolute; width:9px; height:9px; transform:translate(-50%,-50%); border-radius:50%;
	background:var(--wm-panel-2); box-shadow:inset 0 0 0 1px var(--wm-border); }
.wm-tnode--active { border-radius:3px; }
.wm-tnode--choice { border-radius:2px; }
.wm-tnode.is-on { width:26px; height:26px; background:#0c0e1e; border-radius:8px; overflow:hidden; z-index:2;
	box-shadow:0 0 0 2px var(--cc,#00B67A), 0 2px 6px rgba(0,0,0,.5); text-decoration:none; }
.wm-tnode--active.is-on { border-radius:50%; }
.wm-tnode--choice.is-on { border-radius:4px; box-shadow:0 0 0 2px #E0942B, 0 2px 6px rgba(0,0,0,.5); }
.wm-tnode.is-on:hover { z-index:5; transform:translate(-50%,-50%) scale(1.14); box-shadow:0 0 0 2px #fff, 0 3px 10px rgba(0,0,0,.6); }
.wm-tnode.is-on ins, .wm-tnode.is-on .iconsmall, .wm-tnode.is-on .icontiny,
.wm-tnode.is-on .iconmedium { display:block !important; width:100% !important; height:100% !important;
	margin:0 !important; background-size:cover !important; background-position:center !important; }
.wm-tnode.is-on del { display:none !important; }
.wm-tnode.is-on img { width:100%; height:100%; display:block; object-fit:cover; }
.wm-tnode--solid.is-on { background:var(--cc,#00B67A); }
.wm-tnode__r { position:absolute; right:-3px; bottom:-4px; z-index:3; font:800 10px/1.3 var(--font-head); color:#fff;
	background:#0c0e1e; border-radius:4px; padding:0 3px; box-shadow:0 0 0 1px var(--cc,#00B67A); }
.wm-treeview__hint { color:var(--wm-dim); font-size:12px; line-height:1.5; margin:14px 0 0; }