.gd-article {
  --gd-panel: #101a27;
  --gd-faint: #a5b2c1;
  --gd-line: #2a3646;
  color: #edf1f4;
  font-family: Barlow, Arial, sans-serif;
  line-height: 1.57;
}
.gd-article h1, .gd-article h2, .gd-article h3, .gd-article h4, .gd-article p {
  margin: 0;
}
.gd-article h1, .gd-article h2, .gd-article h3, .gd-article h4 {
  font-family: 'Barlow Condensed', Barlow, Arial, sans-serif;
  line-height: 1.12;
}
.gd-article h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); }
.gd-article h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); }
.gd-article h3 { font-size: 1.36rem; }
.gd-article h4 { font-size: 1.19rem; }
.gd-article p { color: #c6cfd8; }
.gd-article a { color: var(--accent); text-underline-offset: .2em; }
.gd-article a:hover { color: var(--focus); }
.gd-article a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gd-hero {
  min-height: 240px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: end;
  padding: clamp(1.5rem, 5vw, 3.6rem);
  background: #111e2a;
  border: 1px solid var(--gd-line);
  border-radius: 9px;
}
.gd-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 43%;
  z-index: -2;
}
.gd-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(7,13,21,.98), rgba(7,13,21,.85) 43%, rgba(7,13,21,.15) 95%),
              linear-gradient(0deg, rgba(7,13,21,.7), transparent 85%);
}
.gd-hero .gd-game {
  margin-bottom: .5rem;
  font: 700 .76rem/1.3 Barlow, Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.gd-hero .gd-intro { margin-top: .65rem; color: #dce2e9; }
.gd-class-layout {
  display: grid;
  grid-template-columns: minmax(165px, 230px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1rem, 3vw, 2rem);
  margin-block: 1.6rem;
}
.gd-selector, .gd-profile, .gd-note {
  background: var(--gd-panel);
  border: 1px solid var(--gd-line);
  border-radius: 8px;
}
.gd-selector { padding: 1.05rem; }
.gd-selector h2 { font-size: 1.31rem; margin-bottom: .75rem; }
.gd-selector > div { display: grid; gap: 3px; }
.gd-selector a {
  min-height: 37px;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .32rem .55rem;
  color: #d4dce4;
  border: 1px solid transparent;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}
.gd-selector img, .gd-profile-title img {
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid #535760;
}
.gd-selector a[aria-current], .gd-selector a:hover {
  color: var(--gd-class);
  background: #1e2938;
  border-color: #46515d;
}
.gd-profile { border-top: 2px solid var(--gd-class); padding: clamp(1.2rem, 3vw, 2rem); }
.gd-profile-title { display: flex; align-items: center; gap: .8rem; color: var(--gd-class); }
.gd-profile-title + p { margin-top: .8rem; }
.gd-profile > h3 { margin: 1.4rem 0 .6rem; }
.gd-specs { display: flex; flex-wrap: wrap; gap: 6px; }
.gd-specs a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .28rem .68rem;
  border: 1px solid var(--gd-line);
  border-radius: 4px;
  background: #162231;
  color: #e9edf2;
  font-size: .94rem;
  text-decoration: none;
  font-weight: 600;
}
.gd-specs a[aria-current], .gd-specs a:hover { color: var(--gd-class); border-color: var(--gd-class); }
.gd-selected-spec { margin-top: .95rem; padding-left: .8rem; border-left: 2px solid var(--gd-class); }
.gd-selected-spec h4 { margin-bottom: .3rem; }
.gd-profile .gd-hint, .gd-source-inline { margin-top: .85rem; color: var(--gd-faint); font-size: .9rem; }
.gd-action {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1rem;
  padding: .5rem .85rem;
  border: 1px solid var(--accent-line);
  border-radius: 4px;
  background: var(--accent-soft);
  text-decoration: none;
  font-weight: 700;
}
.gd-factions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.gd-factions > div { padding: .7rem .85rem; border: 1px solid var(--gd-line); border-radius: 4px; }
.gd-factions h4 { margin-bottom: .3rem; color: #a3c9f0; }
.gd-factions > div + div h4 { color: #f0ab97; }
.gd-factions p { font-size: .94rem; }
.gd-profile .gd-source-inline { margin: 1.2rem 0 0; }
.gd-note { margin-top: 1.8rem; padding: 1.25rem 1.45rem; }
.gd-note h2, .gd-sources h2 { font-size: 1.5rem; margin-bottom: .6rem; }
.gd-note p + p { margin-top: .7rem; }
.gd-sources { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--gd-line); }
.gd-sources ul { display: grid; gap: .2rem; margin: .75rem 0 0; padding-left: 1.2rem; color: #7f8a9b; }
.gd-sources a { font-size: .93rem; }
.gd-link-mark { display: inline-block; font-size: .8em; }
.gd-reading { margin-block-start: 2rem; }
.gd-featured-media { margin:20px 0; padding-bottom:15px; border-bottom:1px solid var(--gd-line); }
.gd-featured-media h2 { margin-bottom:8px; color:var(--gd-faint); font:600 .91rem/1.3 var(--body); }
.gd-video-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); gap:12px 24px; }
.gd-article .gd-video-card {
  display:grid; grid-template-columns:clamp(88px,10vw,132px) minmax(0,1fr); gap:13px; align-items:center;
  justify-self:start; max-width:100%; border-radius:4px; color:var(--ink); text-decoration:none;
}
.gd-video-thumb { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:4px; background:#080c13; }
.gd-video-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.gd-video-play {
  position:absolute; right:4px; bottom:4px; display:grid; place-items:center;
  width:21px; height:16px; border-radius:4px; color:white; background:#080c13dd; font:700 9px/1 Arial,sans-serif;
}
.gd-video-caption { display:grid; gap:3px; overflow-wrap:anywhere; }
.gd-video-caption strong { font:600 1.04rem/1.3 var(--body); }
.gd-video-caption > span,.gd-article .gd-video-playlists a { color:var(--gd-faint); font-size:.86rem; }
.gd-video-card:is(:hover,:focus-visible) strong,.gd-article .gd-video-playlists a:hover { color:var(--accent); text-decoration:underline; }
.gd-video-playlists { display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:5px; }
.gd-video-playlists a { padding-block:4px; }
.gd-section h2 { margin-bottom: .8rem; }
.gd-section + .gd-section { margin-top: 1.8rem; }
.gd-section p + p { margin-top: .7rem; }
.gd-section .gd-chapter { font-size:.88rem; margin-top:.6rem; }
.gd-steps { margin: 1.15rem 0 0; padding-left: 1.7rem; }
.gd-steps li { margin-bottom: 1.15rem; padding-left: .35rem; }
.gd-steps li::marker { color: var(--accent); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; }
.gd-steps h3 { margin-bottom: .36rem; }
.gd-media { margin-top: 2.25rem; }
.gd-media h2 { margin-bottom: .8rem; }
.gd-media ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem,100%),1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.gd-media a { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: .9rem; padding: .8rem .95rem; border: 1px solid var(--gd-line); border-radius: 5px; background: var(--gd-panel); text-decoration: none; }
.gd-media a:hover, .gd-media a:focus-visible { border-color: var(--accent); }
.gd-media small { display: block; margin-bottom: .18rem; color: var(--gd-faint); }
.gd-media strong { display: block; font: 700 1.16rem/1.15 var(--display); color: var(--ink); overflow-wrap: anywhere; }
.class-directory { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:14px; margin-top:22px; }
.class-directory article { min-width:0; border:1px solid var(--gd-line); border-top:2px solid var(--class); border-radius:7px; background:var(--gd-panel); padding:19px; }
.class-directory h2 a { color:var(--class); display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.class-directory h2 img { border-radius:4px; }
.class-directory h2 + p { margin:9px 0; }
.race-list { margin:12px 0; display:grid; gap:7px; }
.race-list div { display:grid; grid-template-columns:4.1rem 1fr; column-gap:.5rem; font-size:.96rem; }
.race-list dt { font-weight:700; color:#9bc6ef; }
.race-list div + div dt { color:#ffb5a3; }
.race-list dd { margin:0; }
.directory-link { display:inline-flex; align-items:center; gap:7px; padding-block:6px; font-weight:700; }
.spec-jumps { display:flex; gap:10px 18px; flex-wrap:wrap; }
.spec-jumps a { font-weight:700; text-decoration:underline; text-underline-offset:.2em; }
.spec-jumps { margin:13px 0 18px; color:var(--accent); }
.spec-reading { width:100%; max-width:none; margin:32px 0 20px; padding-top:18px; border-top:1px solid var(--line); }
.spec-reading h2 { margin:.4rem 0 .8rem; }
.spec-reading .gd-note h3 { margin-bottom:.4rem; }
.spec-reading .play-back { margin-top:22px; }
@media (max-width: 680px) {
  .gd-hero { min-height: 200px; }
  .gd-hero::before { background: linear-gradient(90deg, rgba(7,13,21,.92), rgba(7,13,21,.64)),linear-gradient(0deg, rgba(7,13,21,.55), transparent); }
  .gd-class-layout { grid-template-columns: 1fr; }
  .gd-selector > div { grid-template-columns: repeat(auto-fit,minmax(121px,1fr)); }
  .gd-selector a { min-height: 40px; }
  .gd-selector img { width: 20px; height: 20px; }
  .gd-specs a { min-height: 40px; }
  .gd-factions { grid-template-columns: 1fr; }
}

.full-class { --class-line:color-mix(in srgb,var(--class) 32%,#202e40); }
.full-class .class-banner {
  min-height:clamp(166px,17vw,224px); align-items:center; gap:clamp(14px,2vw,26px);
  border-color:var(--class-line); padding:clamp(20px,4vw,48px);
}
.class-banner::before {
  background:linear-gradient(90deg,#07101bec 4%,#081421bb 43%,#0a132228 78%),linear-gradient(0deg,#0913255e,transparent 62%);
}
.class-banner .gd-cover { object-position:75% 5%; }
.class-banner-icon { border:2px solid var(--class-line); border-radius:10px; width:clamp(46px,6vw,72px); height:auto; box-shadow:0 5px 20px #0008; }
.class-banner .gd-game { color:#d0d9e6; }
.class-banner h1 { color:var(--class); font-size:clamp(43px,5.7vw,80px); }
.class-intro { border:1px solid var(--class-line); border-left:3px solid var(--class); border-radius:6px; background:linear-gradient(95deg,color-mix(in srgb,var(--class) 7%,#101b29),#0d1825); margin:15px 0; padding:15px clamp(16px,2.2vw,28px); }
.class-intro p { color:#dce6ef; font-size:clamp(16px,1.27vw,19px); }
.class-spec-list,.class-practice { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.4vw,20px); }
.class-spec-card {
  display:flex; flex-direction:column; align-items:center; min-width:0; text-align:center;
  border:1px solid var(--class-line); border-top:3px solid var(--class); border-radius:8px;
  padding:clamp(16px,2.1vw,28px);
  background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--class) 7%,var(--gd-panel)),#0e1927 75%);
}
.class-spec-card h3 { display:flex; gap:11px; align-items:center; color:var(--class); font-size:clamp(23px,2.1vw,32px); overflow-wrap:anywhere; }
.class-glyph { display:inline-block; flex:none; width:36px; height:36px; border-radius:6px; border:1px solid var(--class-line); background-repeat:no-repeat; }
.class-spec-card p { margin:14px 0 19px; }
.class-spec-card .class-spec-cta { display:inline-flex; justify-content:center; align-items:center; gap:10px; min-height:42px; width:100%; margin-top:auto; padding:7px 9px; color:#f0f6ff; border:1px solid var(--class-line); border-radius:5px; background:color-mix(in srgb,var(--class) 15%,#132135); font-weight:700; }
.class-spec-card .class-spec-cta:hover { border-color:var(--class); background:color-mix(in srgb,var(--class) 23%,#132135); }
.class-play-link { font-size:.91rem; margin-top:8px; padding:3px; }
.class-panel { margin-top:20px; padding:clamp(16px,2vw,26px); border:1px solid var(--gd-line); border-radius:8px; background:var(--gd-panel); }
.class-panel h2,.class-practice h2 { margin:0 0 12px; }
.class-feature-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0; margin:0; list-style:none; }
.class-feature-list li { display:flex; align-items:flex-start; gap:11px; padding:13px 15px; border-left:2px solid var(--class-line); background:#182535; border-radius:3px; }
.class-feature-list h3 { margin:0 0 4px; font-size:1.22rem; }
.class-races { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(16px,4vw,50px); align-items:center; }
.class-races .race-list { margin:0; }
.class-races .race-list div { padding-block:7px; border-bottom:1px solid var(--gd-line); }
.class-practice { margin-top:20px; }
.class-practice .gd-section { margin:0; padding:clamp(15px,1.7vw,24px); background:#101b29; border:1px solid var(--gd-line); border-radius:7px; }
.class-practice h2 { font-size:clamp(22px,2vw,29px); }
.full-class > .directory-link { margin-top:9px; }

a.wow-spell,.gd-article a.wow-spell,.sx-planner a.wow-spell {
  color:#f2ce85; font-weight:650; text-decoration:underline; text-decoration-color:#ad894a;
  text-decoration-thickness:1px; text-underline-offset:.16em; overflow-wrap:anywhere;
}
a.wow-spell:hover,.gd-article a.wow-spell:hover,.sx-planner a.wow-spell:hover { color:#ffe8af; text-decoration-color:currentColor; }
a.wow-spell:focus-visible { outline:2px solid #ffe2a2; outline-offset:3px; border-radius:2px; }
.wow-spell img { display:inline-block; width:1.09em; height:1.09em; margin-inline-end:.22em; vertical-align:-.17em; object-fit:cover; border:1px solid #a88c57; border-radius:3px; }
.wow-spell-tip {
  position:fixed; z-index:50; width:max-content; max-width:min(355px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow:auto;
  padding:12px 14px; border:1px solid #958159; border-radius:5px; background:linear-gradient(155deg,#182033,#0b111f 85%);
  box-shadow:0 5px 20px #0009,inset 0 0 0 2px #212737; color:#ebedf4; font:400 .94rem/1.44 var(--body); overflow-wrap:anywhere;
}
.wow-tip-head { display:flex; gap:9px; align-items:center; color:#ffda87; }
.wow-tip-head img,.wow-tip-sprite { display:block; flex:none; width:32px; height:32px; border:1px solid #ae996b; border-radius:4px; }
.wow-tip-head strong { font-size:1.06rem; }
.wow-spell-tip p { margin:7px 0 0; white-space:pre-line; }
.wow-spell-tip .wow-tip-detail { font-size:.84rem; color:#c0c9db; }
.wow-spell-tip .wow-tip-requirement { color:#ffb195; }
.wow-tip-actions { display:flex; align-items:center; gap:12px; margin-top:9px; border-top:1px solid #353b49; }
.wow-tip-actions a,.wow-tip-actions button { display:inline-flex; align-items:center; min-height:44px; color:#ffda87; }
.wow-tip-actions a { flex:1; text-decoration:underline; }
.wow-tip-actions button { justify-content:center; min-width:44px; border:0; background:transparent; font-size:1.45rem; }
@media (min-width:681px) and (max-width:1000px) {
  .class-spec-card h3 { flex-direction:column; font-size:22px; }
}
@media (max-width:680px) {
  .full-class .class-banner { min-height:139px; }
  .class-spec-list,.class-practice,.class-feature-list,.class-races { grid-template-columns:1fr; }
  .class-spec-card { align-items:flex-start; text-align:left; }
  .class-spec-card p { margin:9px 0 12px; }
  .class-play-link { align-self:center; }
}