/* The Honor Codex: WoW Forever class PvP guide (codex64.net) */
:root{--bg:#120d09;--ink:#e9dcc0;--soft:#cbb994;--dim:#a8977a;--gold:#f2cf6e;--gold2:#c9a54c;--line:#3a2c18;--panel:#1a130c;--frame:#8a6a2c}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Alegreya',Georgia,serif;font-size:19px;line-height:1.65;background-image:radial-gradient(circle at 50% 0,rgba(255,190,90,.08),transparent 45%),repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 2px,transparent 2px 9px);overflow-x:hidden}
a{color:var(--gold)}a:hover{color:#fff1c2}
:focus-visible{outline:2px solid #ffe08a;outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:10;background:#000;padding:8px 12px}

.nav{position:sticky;top:0;z-index:5;border-bottom:2px solid #6b5124;box-shadow:0 1px 0 #2c2112,0 8px 24px rgba(0,0,0,.6);background:linear-gradient(#2a2015,#17110b)}
.nav .wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap;min-height:64px}
.logo{font-family:'Cinzel Decorative',serif;font-weight:700;font-size:22px;color:var(--gold);text-decoration:none;text-shadow:0 2px 0 #000}
.navl{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.navl a{font-family:'Cinzel',serif;font-size:15px;color:#d9c08a;text-decoration:none;padding:10px 14px;border:1px solid transparent}
.navl a:hover{border-color:#6b5124;color:#fff1c2}

.hero{position:relative;padding:72px 0 0;text-align:center;overflow:hidden}
.fb{position:absolute;top:-8px;width:150px;height:430px;clip-path:polygon(0 0,100% 0,100% 88%,50% 100%,0 88%)}
.fb.al{left:max(16px,calc(50% - 690px));background:linear-gradient(#1b3f86,#0f2554);box-shadow:inset 0 0 0 6px #c9a54c}
.fb.ho{right:max(16px,calc(50% - 690px));background:linear-gradient(#2e1712,#120806);box-shadow:inset 0 0 0 6px #8e1b16}
.fb img{position:absolute;left:20px;top:96px;width:110px;height:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.7))}
.fb span{position:absolute;left:0;right:0;top:262px;text-align:center;font-family:'Cinzel',serif;font-weight:700;font-size:16px;letter-spacing:.08em}
.fb.al span{color:#f0d085}.fb.ho span{color:#e0e0e0}
.title{font-family:'Cinzel Decorative',serif;font-weight:700;font-size:clamp(40px,7vw,92px);line-height:1;margin:0;color:#f5d27a;background:linear-gradient(#fff2c4 10%,#f0c35a 45%,#9c6a1c 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 0 #2b1a06) drop-shadow(0 10px 20px rgba(0,0,0,.8))}
.sub{font-family:'Cinzel',serif;font-size:20px;color:#d9c08a;margin:18px 0 0}
.lede{max-width:600px;margin:22px auto 0;font-size:21px}
.rod{height:14px;margin:120px auto 0;max-width:1140px;border-radius:7px;background:linear-gradient(#e6c06a,#7a5418);box-shadow:0 4px 10px rgba(0,0,0,.7)}
.hall{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:12px;max-width:1110px;margin:0 auto;padding:0 12px}
.ban{border:0;padding:26px 0 0;cursor:pointer;font:inherit;color:#120d09;background:none;display:flex;flex-direction:column;align-items:center;transition:transform .25s}
.ban .cloth{width:100%;height:210px;clip-path:polygon(0 0,100% 0,100% 86%,50% 100%,0 86%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;box-shadow:inset 0 0 0 4px rgba(0,0,0,.25);filter:brightness(.7);transition:filter .25s}
.ban .ini{width:56px;height:56px;border-radius:50%;border:3px solid #c9a54c;box-shadow:0 0 0 2px #120d09,0 4px 8px rgba(0,0,0,.6);overflow:hidden;display:block}
.ban .ini img,.sh .s img,.big img{width:100%;height:100%;object-fit:cover;display:block}
.ban .nm{font-family:'Cinzel',serif;font-weight:700;font-size:15px;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.06em}
.ban:hover{transform:translateY(8px)}
.ban:hover .cloth{filter:brightness(.9)}
.ban{text-decoration:none}
.ban[aria-current="page"]{transform:translateY(18px)}
.ban[aria-current="page"] .cloth{filter:drop-shadow(0 0 14px var(--c))}
.pickline{text-align:center;color:var(--soft);margin:30px auto 0}

.frame{position:relative;border:2px solid var(--frame);background:rgba(20,14,9,.9);box-shadow:inset 0 0 0 1px #2c2112,inset 0 0 0 4px #1a130c,inset 0 0 0 5px #5a4320,0 10px 30px rgba(0,0,0,.6)}
.frame:before,.frame:after{content:"";position:absolute;width:18px;height:18px;border:2px solid #e5bd5c;transform:rotate(45deg);background:var(--bg);top:-11px}
.frame:before{left:-11px}.frame:after{right:-11px}

.ghead{margin-top:64px;padding:40px 44px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:center;scroll-margin-top:90px}
.gname{font-family:'Cinzel Decorative',serif;font-weight:700;font-size:clamp(44px,6vw,78px);line-height:1;margin:0;text-shadow:0 4px 0 #000}
.gtag{font-family:'Cinzel',serif;font-size:21px;color:#ffe9a8;margin:12px 0 0}
.gover{margin:16px 0 0;max-width:64ch}
.facts{display:grid;gap:14px;font-size:17px}
.facts b{display:block;font-family:'Cinzel',serif;font-size:14px;color:var(--gold2);font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:15px;padding:2px 10px;border:1px solid #5a4320;border-radius:2px;color:#f3e7cc}
.pips{display:flex;gap:5px;margin-top:4px}
.pip{width:30px;height:9px;border-radius:2px;background:#2a2016;border:1px solid #4a3a22}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0}
.toc a{font-family:'Cinzel',serif;font-size:15px;text-decoration:none;padding:10px 14px;border:1px solid #5a4320;color:#d9c08a;background:var(--panel);min-height:44px;display:inline-flex;align-items:center}
.toc a:hover{border-color:#e5bd5c;color:#fff1c2}

.ch{padding-top:72px;scroll-margin-top:70px}
.chh{display:flex;align-items:baseline;gap:16px;margin:0 0 22px;border-bottom:1px solid var(--line);padding-bottom:10px}
.chh .num{font-family:'Cinzel Decorative',serif;font-size:30px;color:var(--frame);min-width:52px}
.chh h2{font-family:'Cinzel',serif;font-weight:700;font-size:36px;color:var(--gold);margin:0;line-height:1.2;text-shadow:0 2px 0 #000}
.note{color:var(--dim);font-size:17px;margin:-10px 0 20px}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.spec{padding:24px 26px}
.spec h3{font-family:'Cinzel',serif;font-size:22px;color:#ffe9a8;margin:0}
.spec .bd{font-family:'Cinzel',serif;font-size:16px;color:var(--gold2);margin:4px 0 10px}
.spec p{margin:0;color:var(--soft);font-size:17px}
.ab{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;padding:16px;background:linear-gradient(#2e2418,#17110b);border:2px solid var(--frame);border-radius:4px}
.slot{text-align:center}
.slot .ic{aspect-ratio:1;max-width:96px;margin:0 auto 8px;border:2px solid #6c6c74;border-radius:4px;position:relative;overflow:hidden;box-shadow:0 0 0 1px #000}
.slot .ic img{width:100%;height:100%;display:block}
.slot .ic:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 10px rgba(0,0,0,.7)}
.slot .ic b{position:absolute;right:5px;top:1px;z-index:1;font-family:'Cinzel',serif;color:#fff;text-shadow:0 0 3px #000,0 1px 2px #000}
.watch li{display:flex;gap:8px;align-items:center;list-style:none;margin-left:-18px;padding:2px 0}
.watch li img{width:28px;height:28px;border:1px solid #6c6c74;border-radius:3px;flex:none}
.slot .t{font-family:'Cinzel',serif;font-size:15px;color:#fff1c2;line-height:1.2}
.slot .d{font-size:14px;color:#bfae8a;line-height:1.35;margin-top:4px}
.tl{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative;list-style:none;margin:0;padding:0;counter-reset:s}
.tl:before{content:"";position:absolute;left:10%;right:10%;top:22px;height:3px;background:linear-gradient(90deg,#8a6a2c,#e5bd5c,#8a6a2c)}
.tl li{counter-increment:s;text-align:center;padding:0 10px;position:relative;font-size:17px}
.tl li:before{content:counter(s);display:grid;place-items:center;width:46px;height:46px;margin:0 auto 12px;font-family:'Cinzel',serif;font-weight:700;font-size:18px;color:#1a1208;background:linear-gradient(#ffe9a8,#c9a54c);clip-path:polygon(50% 0,100% 18%,100% 70%,50% 100%,0 70%,0 18%);position:relative}

.war{padding:34px 30px 30px;text-align:center}
.foes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:26px}
.sh{border:0;padding:0;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:'Cinzel',serif;font-size:13px;color:#bfae8a;min-width:70px;min-height:44px}
.sh .s{width:48px;height:48px;border-radius:50%;overflow:hidden;border:2px solid var(--c);box-shadow:0 0 0 2px #120d09;filter:brightness(.6) saturate(.7)}
.sh:hover .s{filter:brightness(.85)}
.sh[aria-pressed="true"] .s{filter:drop-shadow(0 0 10px var(--c))}
.sh[aria-pressed="true"] .n{color:var(--c)}
.sh i{font-style:normal;font-weight:700;font-size:12px}
.duel{display:flex;align-items:center;justify-content:center;gap:22px}
.big{width:120px;height:120px;border-radius:50%;overflow:hidden;border:5px solid var(--c);box-shadow:0 0 0 3px #120d09,0 0 0 5px #c9a54c,0 0 26px var(--c)}
.vsx{font-family:'Cinzel Decorative',serif;font-weight:700;font-size:40px;color:#e5bd5c;text-shadow:0 3px 0 #000}
.dn{display:flex;justify-content:center;gap:120px;font-family:'Cinzel',serif;font-size:20px;margin-top:8px}
.verdict{display:inline-block;margin-top:18px;font-family:'Cinzel',serif;font-weight:700;font-size:18px;padding:6px 18px;border-radius:3px}
.v-favored{background:#7dff6a;color:#0d1a08}.v-even{background:#e5bd5c;color:#1a1208}.v-hard{background:#7a1410;color:#ffd9d4;border:1px solid #e0493f}
.t-favored{color:#7dff6a}.t-even{color:#e5bd5c}.t-hard{color:#ff8a7a}
.vtip{font-size:22px;color:#fff1c2;margin:14px auto 0;max-width:44ch;font-style:italic}
.watch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px;text-align:left}
.watch div{padding:14px 16px;background:var(--panel);border:1px solid var(--line)}
.watch b{font-family:'Cinzel',serif;font-size:15px;color:var(--gold2);font-weight:400;display:block;margin-bottom:4px}
.watch ul{margin:0;padding-left:18px;font-size:17px}

.bgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.bg{overflow:hidden;padding-bottom:18px}
.bgart{height:90px}
.bg h3{font-family:'Cinzel',serif;font-size:19px;color:#ffe9a8;margin:14px 18px 2px}
.bg .lv{font-size:14px;color:var(--dim);margin:0 18px 6px}
.bg p{margin:0 18px;font-size:16px;color:var(--soft);line-height:1.45}
.last{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.box{padding:22px 24px}
.box h3{font-family:'Cinzel',serif;font-size:19px;color:#ffe9a8;margin:0 0 8px}
.box p,.box ul{margin:0;font-size:17px;color:var(--soft)}
.box ul{padding-left:18px}
.box p+p{margin-top:10px}
.box.tip{border-color:#1eff00}.box.tip h3{color:#7dff6a}
.rk{margin-top:72px;padding:26px 30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;scroll-margin-top:90px}
.rk h3{font-family:'Cinzel',serif;font-size:19px;color:#ffe9a8;margin:0 0 6px}
.rk p{margin:0;color:var(--soft);font-size:17px}
.foot{margin-top:80px;padding:28px 0 40px;border-top:2px solid var(--line);font-size:15px;color:#8f7f63;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
.foot a{color:#bfae8a}

@media (max-width:1000px){
  .fb{display:none}.rod{margin-top:56px}.hero{padding-top:48px}
  .hall{grid-template-columns:repeat(5,minmax(0,1fr))}
  .ghead{grid-template-columns:1fr;padding:30px 24px}
  .ab{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tl{grid-template-columns:1fr;gap:14px}.tl:before{display:none}
  .tl li{display:flex;gap:14px;align-items:center;text-align:left;padding:0}.tl li:before{margin:0;flex:none}
  .bgs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .last,.rk{grid-template-columns:1fr}
}
@media (max-width:560px){
  body{font-size:18px}
  .wrap{padding:0 16px}
  .navl{margin-left:0}.navl a{padding:8px 10px;font-size:14px}
  .hall{grid-template-columns:repeat(3,minmax(0,1fr))}.ban .cloth{height:176px}.ban .ini{width:44px;height:44px}.ban{padding-top:16px}
  .ban[aria-current="page"]{transform:translateY(8px)}
  .chh h2{font-size:28px}
  .bgs,.watch{grid-template-columns:1fr}
  .dn{gap:40px}.big{width:90px;height:90px}
  .war{padding:26px 16px}
}

/* ---- Talents and PvP builds ---- */
.howto{padding:22px 28px;margin-bottom:28px}
.howto h3{font-family:'Cinzel',serif;font-size:20px;color:#ffe9a8;margin:0 0 8px}
.howto ul{margin:0;padding-left:20px;color:var(--soft);font-size:17px}
.howto li{margin:3px 0}
.btabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:-2px;position:relative;z-index:1}
.btab{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:10px 18px;min-height:56px;cursor:pointer;text-align:left;background:var(--panel);border:2px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;color:#bfae8a;font:inherit}
.btab b{font-family:'Cinzel',serif;font-size:17px;color:#e9dcc0}
.btab span{font-size:14px;line-height:1.2}
.btab:hover b{color:#fff1c2}
.btab[aria-selected="true"]{background:#2a2015;border-color:var(--frame)}
.btab[aria-selected="true"] b{color:var(--gold)}
.bpanel{padding:28px 30px 26px}
.bpanel:before,.bpanel:after{display:none}
.bhead{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
.bhead h3{font-family:'Cinzel Decorative',serif;font-size:clamp(28px,3.4vw,40px);color:var(--gold);margin:0;line-height:1.1;text-shadow:0 2px 0 #000}
.btag{margin:4px 0 0;font-family:'Cinzel',serif;color:#ffe9a8;font-size:17px}
.bsplit{display:flex;gap:6px}
.bsplit span{display:flex;flex-direction:column;align-items:center;min-width:76px;padding:6px 8px;background:var(--panel);border:1px solid var(--line);font-size:13px;color:var(--dim);line-height:1.2;text-align:center}
.bsplit b{font-family:'Cinzel',serif;font-size:24px;color:#fff1c2}
.bsum{margin:16px 0 4px;max-width:70ch}
.bbest{margin:0 0 22px;color:var(--soft);font-size:17px}
.bbest b{font-family:'Cinzel',serif;font-weight:400;color:var(--gold2)}
.trees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tree{padding:12px 10px 18px;background:linear-gradient(#1d1710,#0e0a07);border:1px solid #4a3a22;border-radius:4px;box-shadow:inset 0 0 30px rgba(0,0,0,.6)}
.thead{display:flex;align-items:center;gap:10px;padding:0 4px 12px;border-bottom:1px solid #2c2112;margin-bottom:12px}
.thead img{width:32px;height:32px;border-radius:50%;border:2px solid #8a6a2c}
.thead span{font-family:'Cinzel',serif;font-size:17px;color:#ffe9a8;flex:1}
.thead em{font-style:normal;font-family:'Cinzel',serif;font-size:15px;color:var(--gold2)}
.tgrid{--s:60px;position:relative;width:calc(var(--s) * 4);height:calc(var(--s) * 7);margin:0 auto}
.tal{position:absolute;left:calc((var(--c) - 1) * var(--s) + 7px);top:calc((var(--r) - 1) * var(--s) + 7px);width:calc(var(--s) - 14px);height:calc(var(--s) - 14px);padding:0;border:2px solid #4a4a4a;border-radius:5px;background:#000;cursor:pointer;z-index:1}
.tal img{width:100%;height:100%;display:block;border-radius:3px;filter:grayscale(1) brightness(.4)}
.tal.part,.tal.max{border-color:#1eff00}
.tal.max{border-color:#ffd100}
.tal.part img,.tal.max img{filter:none}
.tal.key{box-shadow:0 0 0 2px #120d09,0 0 14px 2px rgba(255,209,0,.55)}
.tal b{position:absolute;right:-8px;bottom:-9px;font:700 11px/1 'Alegreya',serif;background:#000;color:#8a8a8a;padding:2px 4px;border-radius:3px;border:1px solid #444}
.tal.part b{color:#1eff00;border-color:#1eff00}
.tal.max b{color:#ffd100;border-color:#ffd100}
.tal.nw:after{content:"";position:absolute;left:-4px;top:-4px;width:9px;height:9px;border-radius:50%;background:#3fc7eb;box-shadow:0 0 0 2px #000}
.tal:hover,.tal:focus-visible{border-color:#fff}
.arr{position:absolute;background:#3a3a3a;z-index:0}
.arr.on{background:#ffd100}
.arr.v{width:4px;left:calc((var(--c) - .5) * var(--s) - 2px);top:calc(var(--r1) * var(--s) - 8px);height:calc((var(--r2) - var(--r1) - 1) * var(--s) + 16px)}
.arr.h{height:4px;top:calc((var(--r) - .5) * var(--s) - 2px);left:calc(var(--c1) * var(--s) - 8px);width:calc((var(--c2) - var(--c1) - 1) * var(--s) + 16px)}
.legend2{display:flex;flex-wrap:wrap;gap:18px;margin:12px 0 0;font-size:15px;color:var(--dim)}
.bh4{font-family:'Cinzel',serif;font-size:21px;color:#ffe9a8;margin:28px 0 12px}
.bkeys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bkey{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;background:var(--panel);border:1px solid var(--line);font-size:16px;color:var(--soft);line-height:1.45}
.bkey img{width:40px;height:40px;border:2px solid #ffd100;border-radius:4px;flex:none}
.bkey b{font-family:'Cinzel',serif;font-weight:700;color:#fff1c2}
.bsw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.bsw div{padding:16px 18px;background:var(--panel);border:1px solid var(--line)}
.bsw h4{font-family:'Cinzel',serif;font-size:17px;margin:0 0 6px;color:#7dff6a}
.bsw div+div h4{color:#ff8a7a}
.bsw ul{margin:0;padding-left:18px;font-size:16px;color:var(--soft)}
.bcalc{margin:20px 0 0;font-size:16px}
.ttip{position:fixed;z-index:20;max-width:320px;padding:10px 12px;background:rgba(8,10,40,.96);border:2px solid #9b9ba6;border-radius:6px;box-shadow:inset 0 0 0 1px #000,0 8px 24px rgba(0,0,0,.7);font-size:15px;line-height:1.4;color:#fff;pointer-events:none}
.ttip b{display:block;font-size:17px}
.ttip .rk{display:block;color:#fff;opacity:.85}
.ttip .nwt{display:block;color:#3fc7eb}
.ttip p{margin:6px 0 0;color:#ffd100}
.ttip .rq{display:block;margin-top:6px;color:#ff6b5b}
.bgart{display:grid;place-items:center}
.bgart img{width:60px;height:60px;border-radius:50%;border:3px solid #c9a54c;box-shadow:0 0 0 2px #120d09,0 6px 14px rgba(0,0,0,.7)}
@media (max-width:1000px){.trees{grid-template-columns:1fr}.bkeys,.bsw{grid-template-columns:1fr}.bpanel{padding:22px 16px}}
@media (max-width:560px){.tgrid{--s:56px}.btab{flex:1 1 140px}.bsplit span{min-width:0;flex:1}.bsplit{width:100%}.howto{padding:18px 18px}}
.slot{position:relative}
.tbadge{position:absolute;left:50%;top:-10px;transform:translateX(-50%);z-index:2;font-style:normal;font-family:'Cinzel',serif;font-size:11px;padding:1px 7px;border-radius:2px;background:#3fc7eb;color:#04131a;font-weight:700}
.gearp{padding:24px 28px;margin-bottom:24px}
.gearp:before,.gearp:after{display:none}
.gearp h3{font-family:'Cinzel',serif;font-size:21px;color:#ffe9a8;margin:0 0 4px}
.gearp .note{margin:0 0 14px}
.gsteps{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px;counter-reset:g}
.gsteps li{counter-increment:g;display:grid;grid-template-columns:40px 190px minmax(0,1fr);gap:14px;align-items:center;padding:10px 14px;background:var(--panel);border:1px solid var(--line);font-size:17px;color:var(--soft)}
.gsteps li:before{content:counter(g);width:34px;height:34px;display:grid;place-items:center;font-family:'Cinzel',serif;font-weight:700;color:#1a1208;background:linear-gradient(#ffe9a8,#c9a54c);clip-path:polygon(50% 0,100% 18%,100% 70%,50% 100%,0 70%,0 18%)}
.q-rare,.q-epic{font-family:'Cinzel',serif;font-weight:700;font-size:16px}
.q-rare{color:#3f9cff}.q-epic{color:#c26bff}
@media (max-width:700px){.gsteps li{grid-template-columns:34px minmax(0,1fr)}.gsteps li>span:last-child{grid-column:2}.gearp{padding:20px 16px}}
/* ---- Per-class gear ---- */
.gearc{display:grid;gap:14px}
.gstat:before,.gstat:after{display:none}
.gh3{font-family:'Cinzel',serif;font-size:21px;color:#ffe9a8;margin:14px 0 0}
.gsets,.gitems{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.gset,.gitem{padding:14px 16px;background:rgba(8,10,40,.9);border:2px solid #6c6c74;border-radius:6px;box-shadow:inset 0 0 0 1px #000}
.gset b,.gitem b{font-family:'Cinzel',serif;font-size:18px;display:block}
.gspec,.ghow{display:block;color:#fff;opacity:.85;font-size:15px}
.gpieces{margin:8px 0 0;font-size:15px;color:#e8e8f0}
.gbon{margin:8px 0 0;padding-left:18px;color:#1eff00;font-size:15px}
.gitem p{margin:6px 0 0;color:#ffd100;font-size:15px}
.gtips{margin:0;padding-left:20px;color:var(--soft);font-size:17px}
.gextra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:6px}
.gextra .box:before,.gextra .box:after{display:none}
.gunk{margin:6px 0 0}
.gunk b{font-family:'Cinzel',serif;font-weight:400;color:var(--gold2)}
.cite{display:inline-block;margin-left:4px;font-size:12px;line-height:1;padding:2px 5px;border:1px solid #6c6c74;border-radius:3px;color:#bfae8a;text-decoration:none;vertical-align:middle}
.cite:hover{border-color:#ffd100;color:#fff}
@media (max-width:1000px){.gextra{grid-template-columns:1fr}}
.gset.ep{border-color:#7a4aa0}
.gtier{display:block;font-size:14px;margin-top:2px}
.gdet{margin-top:8px;font-size:15px;color:#e8e8f0}
.gdet summary{cursor:pointer;color:#fff;min-height:32px;display:flex;align-items:center}
.gdet ul{margin:6px 0 0;padding-left:18px}
.gdet li{margin:3px 0}
.ghm ul{margin:0;padding-left:20px;color:var(--soft);font-size:16px}
.ghm:before,.ghm:after{display:none}
/* matchup plan */
.plan{list-style:none;margin:20px auto 0;padding:0;max-width:760px;display:grid;gap:8px;text-align:left;counter-reset:p}
.plan li{counter-increment:p;display:grid;grid-template-columns:36px 150px minmax(0,1fr);gap:12px;align-items:center;padding:10px 14px;background:var(--panel);border:1px solid var(--line);font-size:17px}
.plan li:before{content:counter(p);width:32px;height:32px;display:grid;place-items:center;font-family:'Cinzel',serif;font-weight:700;color:#1a1208;background:linear-gradient(#ffe9a8,#c9a54c);clip-path:polygon(50% 0,100% 18%,100% 70%,50% 100%,0 70%,0 18%)}
.plan b{font-family:'Cinzel',serif;color:#ffe9a8;font-weight:700}
@media (max-width:640px){.plan li{grid-template-columns:32px minmax(0,1fr)}.plan li span{grid-column:2}}
/* ---- PvP Basics + Battlegrounds pages ---- */
.xhero{padding:48px 0 8px}
.xhero .title{font-size:clamp(38px,6vw,72px)}
.lead2{max-width:72ch;color:var(--ink);margin:0 0 18px}
.glsearch{display:flex;flex-direction:column;gap:6px;max-width:420px;margin-bottom:16px;font-family:'Cinzel',serif;font-size:15px;color:var(--gold2)}
.glsearch input{font:inherit;font-family:'Alegreya',serif;font-size:18px;padding:10px 14px;min-height:46px;background:#0e0a07;color:var(--ink);border:2px solid var(--frame);border-radius:4px}
.gloss{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin:0}
.gl-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid #2c2112}
.gl-row[hidden]{display:none}
.gloss dt{font-family:'Cinzel',serif;font-weight:700;color:#ffe9a8}
.gloss dd{margin:0;color:var(--soft);font-size:17px}
.drgrid,.lessons,.roles,.scen{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.drgrid .box:before,.drgrid .box:after,.lessons .box:before,.lessons .box:after,.roles .box:before,.roles .box:after,.sc:before,.sc:after,.tipbox:before,.tipbox:after,.bghead:before,.bghead:after{display:none}
.drex{margin:0 0 6px;padding-left:18px;color:#ffd100;font-size:15px}
.drc p,.lessons p{margin:0;font-size:17px;color:var(--soft)}
.lessons h3 small{font-family:'Alegreya',serif;font-size:14px;color:var(--dim);font-weight:400}
.tipbox{margin-top:14px;border-color:#1eff00}.tipbox h3{color:#7dff6a}
.sc{padding:18px 20px}
.sc h3{font-family:'Cinzel',serif;font-size:19px;color:#ffe9a8;margin:0 0 10px}
.sc .plan{margin:0;max-width:none}
.sc .plan li{grid-template-columns:32px 70px minmax(0,1fr);font-size:16px}
.sc .why{margin:10px 0 0;font-size:16px;color:var(--soft)}
.sc .why b{font-family:'Cinzel',serif;color:var(--gold2);font-weight:400}
.dd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dd h4{font-family:'Cinzel',serif;margin:0 0 4px;font-size:15px;color:#7dff6a}
.dd div+div h4{color:#ff8a7a}
.dd ul{margin:0;padding-left:18px;font-size:16px;color:var(--soft)}
.kt{width:100%;border-collapse:collapse;font-size:17px}
.kt th{font-family:'Cinzel',serif;font-weight:400;color:var(--gold2);text-align:left;padding:8px 10px;border-bottom:2px solid #5a4320}
.kt td{padding:9px 10px;border-bottom:1px solid #2c2112;vertical-align:top;color:var(--soft)}
kbd{font-family:'Cinzel',serif;font-size:14px;color:#fff1c2;background:#2a2015;border:1px solid #8a6a2c;border-bottom-width:3px;border-radius:4px;padding:2px 8px;white-space:nowrap}
.tscroll{overflow-x:auto}
.macro{white-space:pre-wrap;background:#0e0a07;border:1px solid var(--line);padding:10px 12px;color:#7dff6a;font-size:14px;margin:6px 0}
.addon{padding:8px 0;border-bottom:1px solid #2c2112;font-size:17px;color:var(--soft)}
.addon b{font-family:'Cinzel',serif;color:#ffe9a8}
.csteps li{grid-template-columns:40px minmax(0,1fr)}
.pad{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.padb{display:flex;gap:12px;align-items:center;padding:10px 12px;background:var(--panel);border:1px solid var(--line);font-size:16px;color:var(--soft)}
.btn-glyph{flex:none;min-width:86px;text-align:center;font-family:'Cinzel',serif;font-weight:700;font-size:13px;color:#120d09;background:linear-gradient(#ffe9a8,#c9a54c);border-radius:14px;padding:5px 8px}
.wk{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wk label{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;background:var(--panel);border:1px solid var(--line);cursor:pointer;font-size:17px;color:var(--soft)}
.wk input{width:22px;height:22px;margin-top:3px;accent-color:#c9a54c;flex:none}
.wk b{font-family:'Cinzel',serif;color:#ffe9a8;margin-right:6px}
.wk em{display:block;font-style:normal;color:var(--dim);font-size:15px}
.wk input:checked+span{opacity:.55;text-decoration:line-through}
.srcs{font-size:15px;color:var(--soft);padding-left:22px}
.srcs a{color:#bfae8a}
.bghead{display:flex;gap:18px;align-items:flex-start;padding:20px 22px;margin-bottom:22px}
.bghead img{width:56px;height:56px;border-radius:50%;border:3px solid #c9a54c;flex:none}
.bgobj{margin:8px 0 0}
.bgcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;align-items:start}
.bgmap{margin:0}
.bgmap svg{width:100%;height:auto;display:block}
.bgmap .mbg{fill:#1d1710;stroke:#8a6a2c;stroke-width:.6}
.bgmap .mpath line{stroke:#5a4a30;stroke-width:1.2;stroke-dasharray:2 1.5}
.bgmap circle{stroke:#120d09;stroke-width:.6}
.bgmap .mlab text{font-family:'Alegreya',serif;font-size:3.2px;fill:#e9dcc0;paint-order:stroke;stroke:#120d09;stroke-width:.8px}
.bgmap figcaption{font-size:14px;color:var(--dim);margin-top:6px}
.bgplan li{grid-template-columns:32px 130px minmax(0,1fr)}
@media (max-width:900px){.gloss{grid-template-columns:1fr}.bgcols{grid-template-columns:1fr}.dd{grid-template-columns:1fr}}
@media (max-width:560px){.gl-row{grid-template-columns:96px minmax(0,1fr)}.bgplan li,.sc .plan li{grid-template-columns:32px minmax(0,1fr)}.bgplan li span,.sc .plan li span{grid-column:2}}
.kt td:first-child{white-space:nowrap;width:1%}
.bgmap figcaption::first-letter{text-transform:uppercase}
.bgmap .mlab text.sm{font-size:2.7px}
/* ---- Class basics chapter ---- */
.cb-top .box:before,.cb-top .box:after,.cb-core .box:before,.cb-core .box:after{display:none}
.cb-top{margin-bottom:14px}
.cb-top p{margin:0 0 6px;max-width:72ch}
.mile{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mile li{display:flex;gap:12px;align-items:center;padding:10px 12px;background:var(--panel);border:1px solid var(--line);font-size:16px;color:var(--soft);line-height:1.4}
.mlv{flex:none;width:42px;height:42px;display:grid;place-items:center;font-family:'Cinzel',serif;font-weight:700;font-size:16px;color:#1a1208;background:linear-gradient(#ffe9a8,#c9a54c);clip-path:polygon(50% 0,100% 18%,100% 70%,50% 100%,0 70%,0 18%)}
.mile img{width:40px;height:40px;border:2px solid #6c6c74;border-radius:4px;flex:none}
.mile b{font-family:'Cinzel',serif;color:#fff1c2}
.cb-br{display:grid;gap:8px}
.cbr{display:grid;grid-template-columns:90px minmax(0,1fr);gap:14px;align-items:start;padding:12px 14px;background:var(--panel);border:1px solid var(--line)}
.cbr-r{font-family:'Cinzel',serif;font-weight:700;color:#ffe9a8;font-size:17px}
.cbr p{margin:0;font-size:17px;color:var(--soft)}
.faq{display:grid;gap:8px}
.faq details{background:var(--panel);border:1px solid var(--line);padding:4px 16px}
.faq summary{cursor:pointer;font-family:'Cinzel',serif;color:#ffe9a8;font-size:17px;min-height:44px;display:flex;align-items:center}
.faq p{margin:0 0 12px;color:var(--soft);font-size:17px}
@media (max-width:800px){.mile{grid-template-columns:1fr}.cbr{grid-template-columns:1fr;gap:4px}}
/* ---- leveling order ---- */
.lvlbox{margin:0 0 18px;padding:14px 18px;background:var(--panel);border:1px solid var(--frame);border-radius:4px}
.lvlbox label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:'Cinzel',serif;color:var(--gold2);font-size:16px}
.lvlbox label b{font-size:30px;color:#fff1c2;line-height:1}
.lvlbox input{width:100%;height:36px;accent-color:#c9a54c;margin:6px 0 2px}
.lvlbox p{margin:0;color:var(--soft);font-size:16px}
.lsteps{margin:18px 0 0;background:var(--panel);border:1px solid var(--line);padding:4px 16px}
.lsteps summary{cursor:pointer;font-family:'Cinzel',serif;color:#ffe9a8;font-size:17px;min-height:46px;display:flex;align-items:center}
.lsteps ol{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.lsteps li{display:flex;align-items:center;gap:10px;padding:5px 6px;border-bottom:1px solid #2c2112;font-size:15px;color:var(--soft)}
.lsteps li.now{background:rgba(255,209,0,.08);outline:1px solid #8a6a2c}
.lsteps .lr{flex:none;width:92px;font-family:'Cinzel',serif;font-size:13px;color:var(--gold2)}
.lsteps img{width:28px;height:28px;border:1px solid #6c6c74;border-radius:3px;flex:none}
.lsteps b{font-family:'Cinzel',serif;color:#fff1c2;font-weight:700}
.lsteps em{font-style:normal;color:var(--dim);font-size:13px}
@media (max-width:800px){.lsteps ol{grid-template-columns:1fr}}
/* ---- rank page ---- */
.rtab .fh{display:none}
body.horde .rtab .fa{display:none}
body.horde .rtab .fh{display:inline}
.rbadge{display:inline-grid;place-items:center;width:34px;height:38px;font-family:'Cinzel',serif;font-weight:700;color:#1a1208;background:linear-gradient(#ffe9a8,#c9a54c);clip-path:polygon(50% 0,100% 18%,100% 70%,50% 100%,0 70%,0 18%)}
body.horde .rbadge{background:linear-gradient(#e6e6e6,#8a8a8a)}
.rtab tbody tr{opacity:.45}
.rtab tbody tr.open{opacity:1}
.rtab tbody tr.capnow td{background:rgba(255,209,0,.08)}
.rtab td:nth-child(2){font-family:'Cinzel',serif;color:#fff1c2;white-space:nowrap}
.lp{font-style:normal;color:#3fc7eb;font-size:14px}
.rcalc{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:20px 22px}
.rcalc:before,.rcalc:after{display:none}
.rcalc label{font-family:'Cinzel',serif;color:var(--gold2)}
.rcalc select{font:inherit;font-size:17px;padding:8px 12px;min-height:44px;background:#0e0a07;color:var(--ink);border:2px solid var(--frame);border-radius:4px}
.rkf{display:inline-flex;border:2px solid var(--frame);border-radius:4px;overflow:hidden}
.rkf button{font-family:'Cinzel',serif;font-weight:700;font-size:15px;padding:10px 18px;min-height:44px;border:0;cursor:pointer;color:#d9c08a;background:#1a130c}
.rkf button[aria-pressed="true"]{background:linear-gradient(#2a5db0,#163a7a);color:#fff}
body.horde .rkf button[aria-pressed="true"]{background:linear-gradient(#b0241c,#6a0e09)}
#rkout{flex:1 1 100%;margin:4px 0 0;font-size:19px;color:#fff1c2}
.thisweek{margin:26px auto 0;max-width:820px;padding:18px 24px;text-align:left}
.thisweek:before,.thisweek:after{display:none}
.thisweek h2{font-family:'Cinzel',serif;font-size:20px;color:var(--gold);margin:0 0 6px}
.thisweek ul{margin:0;padding-left:20px;font-size:17px;color:var(--soft)}
.thisweek b{font-family:'Cinzel',serif;color:#ffe9a8;font-weight:700}
.thisweek .note{margin:8px 0 0}
.bg h3 a{color:inherit;text-decoration:none}
.bg h3 a:hover{text-decoration:underline}
.rkmore{grid-column:1/-1;margin:6px 0 0}