/* Forever Builds: dark theme, ember accent, class colours via --c */
:root {
  --bg: #0b0e14;
  --bg-2: #11151e;
  --panel: #161b26;
  --panel-2: #1c2230;
  --line: #262e3f;
  --line-2: #33405a;
  --text: #e7e9ee;
  --muted: #9aa3b5;
  --faint: #6b7489;
  --accent: #f0903c;
  --accent-2: #ffb06b;
  --good: #57d17d;
  --bad: #ff6b6b;
  --warn: #f5c451;
  --radius: 10px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Fantasy, carved-stone style lettering for titles and headings (free Google Fonts) */
  --font-display: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --font-head: "Cinzel", Georgia, "Times New Roman", serif;
  --cell: 64px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--font); min-height: 100vh;
  display: flex; flex-direction: column; }
main { flex: 1; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: .01em; font-family: var(--font-head); font-weight: 700; }
.logo, .nav-link, .cb-main h1, .tree-head h2, .sb-title, .cbx-tab, .drop > summary, .fs-head, .gs-head, .class-pick,
.class-select a, .calc-tab, .eyebrow { font-family: var(--font-head); }
/* Guide text written by visitors stays in the plain, easy-to-read font */
.guide-body h3, .guide-body h4, .prose h3, .prose h4 { font-family: var(--font); }
h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
/* Page titles everywhere use the home page's "WoW Forever" lettering: carved display font in a gold
   gradient with a dark edge and soft glow. Section headings use the same font in plain gold. */
h1, .class-banner h1, .rm-hero h1 {
  font-family: var(--font-display); font-weight: 900; letter-spacing: .02em; text-transform: none; text-shadow: none;
  background: linear-gradient(180deg, #fff6d8 0%, #ffd27a 38%, #e0902f 70%, #9c4f14 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(40, 18, 4, .9)) drop-shadow(0 6px 18px rgba(240, 144, 60, .3)); }
.section-head h2, .section > h2, .page-head h2, .article h2, .prose > h2 {
  font-family: var(--font-display); font-weight: 900; color: #ffd27a; letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(40, 18, 4, .9); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
code { background: var(--panel-2); padding: 1px 5px; border-radius: 4px; font-size: .9em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 28px 16px 48px; }
.wrap.wide { max-width: 1280px; }
.wrap.narrow { max-width: 760px; }
.section { margin-top: 40px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.page-head { margin-bottom: 20px; }
.page-head.row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.sub { color: var(--muted); margin: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; color: var(--accent); margin: 0 0 6px; font-weight: 700; }
.empty { color: var(--muted); background: var(--panel); border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 22px; text-align: center; }
.note, .small { color: var(--muted); font-size: .92rem; }
.data-note { color: var(--faint); font-size: .85rem; margin-top: 24px; }

/* buttons & forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent);
  color: #1a0f05; font-weight: 700; border: 1px solid transparent; border-radius: 8px; padding: 10px 18px;
  cursor: pointer; font: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--accent-2); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--panel-2); }
.btn-small { padding: 6px 12px; font-size: .9rem; }
.btn-block { width: 100%; }
.btn-danger { background: transparent; color: var(--bad); border-color: rgba(255, 107, 107, .4); }
.btn-danger:hover { background: rgba(255, 107, 107, .1); }
input, select, textarea { font: inherit; color: var(--text); background: var(--bg-2); border: 1px solid var(--line-2);
  border-radius: 8px; padding: 9px 12px; width: 100%; }
select { width: auto; }
textarea { resize: vertical; min-height: 120px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.label-link { float: right; font-weight: 400; font-size: .85rem; }
/* "Best for" tick boxes on the build form */
.role-field { border: 0; padding: 0; min-width: 0; }
.role-field legend { padding: 0; font-weight: 600; margin-bottom: 8px; }
.role-field legend .hint { display: inline; margin-left: 6px; }
.role-picks { display: flex; flex-wrap: wrap; gap: 8px; }
label.role-pick { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px 7px 10px; cursor: pointer;
  font-weight: 600; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel-2); user-select: none;
  transition: border-color .15s, background .15s; }
.role-pick input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); cursor: pointer; }
label.role-pick:hover { border-color: var(--accent); }
label.role-pick:has(input:checked) { border-color: var(--accent); background: rgba(240, 144, 60, .16); color: var(--accent-2); }
.role-pick input:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.hint { color: var(--faint); font-size: .85rem; margin: 6px 0 0; font-weight: 400; }
.stack .btn-block { margin-top: 6px; }
.form-actions { display: flex; gap: 10px; }
.hp { position: absolute; left: -9999px; }
/* Newsletter opt-in on the sign-up form (unticked by default) */
.check-field { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; cursor: pointer; line-height: 1.4; }
.check-field input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.check-field .hint { display: block; margin: 2px 0 0; }
.alert { border-radius: 8px; padding: 12px 16px; margin: 0 0 18px; }
.alert ul { margin: 0; padding-left: 18px; }
.alert-error { background: rgba(255, 107, 107, .1); border: 1px solid rgba(255, 107, 107, .35); }
.alert-warn { background: rgba(245, 196, 81, .1); border: 1px solid rgba(245, 196, 81, .35); color: #f8dc95; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0 20px; }
.toolbar input[type=search] { flex: 1 1 220px; width: auto; }
/* Top Builds: "Best for" and sort tick pills under the search bar */
.filter-picks { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.pick-group { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.sort-group { padding-left: 18px; border-left: 1px solid var(--line-2); }
.filter-picks label.role-pick { padding: 5px 12px 5px 9px; font-size: .9rem; }
.sort-pick input { border-radius: 4px; }
@media (max-width: 560px) { .sort-group { padding-left: 0; border-left: 0; } }

/* header */
.site-header { background: rgba(11, 14, 20, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50; }
.header-inner { max-width: 1280px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 18px; min-height: 60px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; font-size: 1.1rem;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo img { flex: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
/* Site name in the same gold "WoW Forever" lettering as the page titles */
.logo span { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; letter-spacing: .02em; text-transform: none;
  line-height: 1.2; padding: 2px 0;
  background: linear-gradient(180deg, #fff6d8 0%, #ffd27a 38%, #e0902f 70%, #9c4f14 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(40, 18, 4, .9)) drop-shadow(0 3px 10px rgba(240, 144, 60, .25)); }
@media (max-width: 380px) { .logo span { font-size: 1.12rem; } }
.site-nav { display: flex; align-items: center; gap: 14px; flex: 1; }
.nav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; }
.nav-item { position: relative; }
.nav-link { display: flex; align-items: center; gap: 6px; color: var(--muted); padding: 8px 10px; border-radius: 6px;
  font-weight: 600; font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.nav-link:hover, .nav-item.active > .nav-link, .has-menu:hover > .nav-link { color: var(--text); background: var(--panel); text-decoration: none; }
.nav-item.active > .nav-link { box-shadow: inset 0 -2px 0 var(--accent); }
.caret { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; }
.menu { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--panel);
  border: 1px solid var(--line-2); border-radius: 8px; box-shadow: var(--shadow); padding: 6px; z-index: 60; }
.menu-right { left: auto; right: 0; }
.menu a, .menu-button { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px;
  color: var(--text); font-size: .95rem; background: none; border: 0; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.menu a:hover, .menu-button:hover { background: var(--panel-2); text-decoration: none; }
.has-menu:hover > .menu, .has-menu:focus-within > .menu, .has-menu.open > .menu { display: block; }
.has-menu { position: relative; }
/* Small class icon in the Top Builds / Class / New Build drop-downs */
.menu .mi { width: 22px; height: 22px; flex: none; border-radius: 4px; border: 1px solid var(--c); color: var(--c);
  padding: 2px; background: #0b0e14; }
.menu img.mi { padding: 0; object-fit: cover; }
.nav-search { flex: 1 1 140px; min-width: 130px; max-width: 240px; margin-left: auto; }
.nav-search input { padding: 7px 12px; font-size: .9rem; }
.account { display: flex; align-items: center; gap: 8px; }
.user-link { text-transform: none; color: var(--text); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line-2); border-radius: 8px;
  width: 42px; height: 38px; padding: 9px; cursor: pointer; flex-direction: column; justify-content: space-between; }
.nav-toggle span:not(.sr-only) { display: block; height: 2px; background: var(--text); border-radius: 2px; }

@media (max-width: 1180px) {
  .nav-toggle { display: flex; }
  .site-nav { display: none; position: absolute; top: 60px; left: 0; right: 0; background: var(--bg-2);
    border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 10px 16px 16px; gap: 10px;
    max-height: calc(100vh - 60px); overflow-y: auto; }
  .site-nav.open { display: flex; }
  .nav-list { flex-direction: column; }
  .nav-link { justify-content: space-between; }
  .menu { position: static; box-shadow: none; border: 0; background: var(--panel); margin: 2px 0 6px; }
  .has-menu:hover > .menu, .has-menu:focus-within > .menu { display: none; }
  .has-menu.open > .menu { display: block; }
  .nav-search { flex: none; max-width: none; margin: 0; }
  .account { justify-content: space-between; flex-wrap: wrap; }
  .account .has-menu { width: 100%; }
}

/* footer */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-2); margin-top: 40px; }
.footer-inner { max-width: 1120px; margin: 0 auto; padding: 24px 16px 32px; color: var(--faint); font-size: .88rem; }
.footer-links { margin-bottom: 10px; color: var(--muted); }
.footer-inner p { margin: 6px 0; }

/* home */
.hero { background: radial-gradient(1100px 420px at 50% 0%, rgba(240, 144, 60, .26), transparent 70%),
  radial-gradient(700px 260px at 50% 100%, rgba(63, 120, 200, .12), transparent 70%),
  linear-gradient(180deg, #121722, var(--bg)); border-bottom: 1px solid var(--line); }
/* Home page background picture (static/img/home-hero.*): fills the top section behind the title and
   countdown, with a dark wash so the gold title stays readable and the image fades into the page below. */
/* Positioned 70% down the picture (not the middle) so the character and bear at the bottom left stay in frame. */
.hero.has-bg { background: linear-gradient(180deg, rgba(11, 14, 20, .35) 0%, rgba(11, 14, 20, .45) 78%, var(--bg) 100%),
  var(--hero-bg) center 70% / cover no-repeat, var(--bg); }
/* Home page background behind the class icons and build cards (static/img/home-bg.*). It stays still
   while the page scrolls over it on computers, and has a dark wash so the cards stay easy to read. */
.home-body.has-bg { background: linear-gradient(180deg, var(--bg) 0%, rgba(11, 14, 20, .78) 8%, rgba(11, 14, 20, .78) 92%, var(--bg) 100%),
  var(--home-bg) center top / cover no-repeat fixed, var(--bg); }
.home-body.has-bg .wrap { padding-bottom: 56px; }
/* On full pages (like Top Builds) the picture starts at the very top, so no fade is needed there,
   and it fills at least the whole screen even when there are only a few builds. */
.page-bg.has-bg { min-height: calc(100vh - 61px);
  background: linear-gradient(180deg, rgba(11, 14, 20, .72) 0%, rgba(11, 14, 20, .78) 92%, var(--bg) 100%),
    var(--home-bg) center top / cover no-repeat fixed, var(--bg); }
@media (hover: none), (max-width: 900px) { .page-bg.has-bg { background-attachment: scroll; } }
/* The site footer's own top margin would leave a plain strip under the picture */
main:has(> .page-bg.has-bg) + .site-footer { margin-top: 0; }
@media (hover: none), (max-width: 900px) {
  /* phones and tablets don't handle fixed backgrounds well, so the picture scrolls with the page there */
  .home-body.has-bg { background-attachment: scroll; }
}
.hero-inner { max-width: 1100px; margin: 0 auto; padding: 72px 16px 60px; text-align: center; }
/* The page's main title: the biggest text on the site */
.hero-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 11vw, 7.5rem); line-height: 1.02;
  margin: 0 0 28px; letter-spacing: .02em; text-transform: none;
  background: linear-gradient(180deg, #fff6d8 0%, #ffd27a 38%, #e0902f 70%, #9c4f14 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(40, 18, 4, .9)) drop-shadow(0 10px 28px rgba(240, 144, 60, .35)); }
.countdown { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cd-label { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.35rem);
  color: #f3d98b; letter-spacing: .08em; text-transform: uppercase; }
.cd-units { display: flex; gap: clamp(8px, 2vw, 18px); justify-content: center; }
.cd-unit { min-width: clamp(68px, 14vw, 120px); padding: 14px 10px 10px; border-radius: 12px;
  background: linear-gradient(180deg, #1d2333, #10141d); border: 1px solid #5a4024;
  box-shadow: inset 0 0 0 1px rgba(255, 210, 122, .08), 0 8px 24px rgba(0, 0, 0, .45); display: flex; flex-direction: column; align-items: center; }
.cd-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 7vw, 4rem); line-height: 1; color: #fff3d6;
  font-variant-numeric: tabular-nums; text-shadow: 0 2px 12px rgba(240, 144, 60, .45); }
.cd-name { margin-top: 6px; font-size: clamp(.68rem, 1.4vw, .85rem); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cd-live { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.8rem, 5vw, 3rem); color: var(--good);
  text-shadow: 0 0 18px rgba(87, 209, 125, .4); }
/* Class bar text: the carved heading font is wide, so keep names compact enough to fit */
nav.class-select { gap: 5px; }
nav.class-select a { gap: 6px; padding: 0 6px; font-size: .8rem; letter-spacing: 0; }
nav.class-select .ci { width: 26px; height: 26px; padding: 3px; }
@media (max-width: 1100px) {
  nav.class-select a { font-size: .9rem; gap: 8px; }
}
@media (max-width: 560px) {
  nav.class-select { padding: 8px; }
  nav.class-select a { font-size: .66rem; gap: 4px; padding: 0 4px; height: 36px; }
  nav.class-select .ci { width: 20px; height: 20px; padding: 2px; }
}
/* Class page: Wowhead-style row of nine square class icons (names show on hover), spread across the
   full width of the bar. The chosen class has a gold frame; the others are dimmed until hovered. */
:is(.calc-page, .home-classes) nav.class-select { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; padding: 10px; justify-items: center; }
:is(.calc-page, .home-classes) nav.class-select a { width: 100%; max-width: 60px; height: auto; aspect-ratio: 1; padding: 0; gap: 0;
  justify-content: center; background: #0b0e14; border: 2px solid #2b3140; border-radius: 4px; overflow: hidden;
  opacity: .6; filter: saturate(.6); transition: opacity .12s, filter .12s, border-color .12s, transform .12s; }
:is(.calc-page, .home-classes) nav.class-select a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:is(.calc-page, .home-classes) nav.class-select a:hover { opacity: 1; filter: none; border-color: #8a7a55; background: #0b0e14; }
:is(.calc-page, .home-classes) nav.class-select a.on { opacity: 1; filter: none; border-color: #f0c050;
  box-shadow: 0 0 0 1px #f0c050, 0 0 14px rgba(240, 192, 80, .45); background: #0b0e14; }
:is(.calc-page, .home-classes) nav.class-select .ci { width: 100%; height: 100%; padding: 18%; border: 0; border-radius: 0;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 30%, #151a24), #0b0e14); }
:is(.calc-page, .home-classes) nav.class-select img.ci { padding: 0; object-fit: cover; }
@media (max-width: 1100px) {
  :is(.calc-page, .home-classes) nav.class-select { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  :is(.calc-page, .home-classes) nav.class-select { gap: 4px; padding: 6px; }
  :is(.calc-page, .home-classes) nav.class-select a { border-width: 1px; }
}
/* Home page "Pick a class": the calculator's class bar, standing on its own */
/* Top Builds page: a big centred title and build count. Below it, the class icons sit centred with
   "+ New Build" at the right end of the same row, lined up above the search filters' right edge. */
.builds-head { text-align: center; margin-bottom: 14px; }
.builds-head h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); line-height: 1.05; margin-bottom: 6px; }
.filter-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 6px 0 16px; }
.filter-row nav.class-filter { margin: 0; }
.filter-row-side.right { justify-self: end; }
@media (max-width: 900px) {
  .filter-row { grid-template-columns: 1fr; justify-items: center; }
  .filter-row-side:not(.right) { display: none; }
  .filter-row-side.right { justify-self: center; }
}
/* Top Builds page: "All" tile plus the nine class icons, same square style as the home page.
   With a class picked, it gets the gold frame and the rest dim; with "All", every icon is bright. */
nav.class-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; background: none; border: 0;
  padding: 0; margin: 6px 0 16px; }
nav.class-filter a { position: relative; flex: 0 0 60px; width: 60px; height: 60px; padding: 0; display: flex;
  align-items: center; justify-content: center; background: #0b0e14; border: 2px solid #2b3140; border-radius: 4px;
  overflow: hidden; transition: opacity .12s, filter .12s, border-color .12s, box-shadow .12s; }
nav.class-filter a span:not(.all-txt) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
nav.class-filter .ci { width: 100%; height: 100%; padding: 18%; border: 0; border-radius: 0;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 30%, #151a24), #0b0e14); }
nav.class-filter img.ci { padding: 0; object-fit: cover; }
nav.class-filter a:hover { border-color: #f0c050; box-shadow: 0 0 0 1px #f0c050, 0 0 14px rgba(240, 192, 80, .45);
  opacity: 1; filter: none; text-decoration: none; }
nav.class-filter a.on { border-color: #f0c050; box-shadow: 0 0 0 1px #f0c050, 0 0 14px rgba(240, 192, 80, .45); }
nav.class-filter.picked a:not(.on) { opacity: .55; filter: saturate(.6); }
/* The "All" tile: a dark-gold tile with carved lettering, sized like the class icons */
nav.class-filter .all-tile { background: radial-gradient(circle at 50% 35%, #3a2c14, #120d06); border-color: #6b5226; }
nav.class-filter .all-txt { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; letter-spacing: .06em;
  text-transform: uppercase; color: #ffd27a; text-shadow: 0 1px 0 #000, 0 0 10px rgba(240, 192, 80, .35); }
@media (max-width: 560px) {
  nav.class-filter { gap: 4px; }
  nav.class-filter a { flex: 1 1 0; width: auto; height: auto; aspect-ratio: 1; min-width: 0; }
  nav.class-filter .all-txt { font-size: .62rem; }
}
/* Class pages: the same tight, centred icon row as the home page (inside its panel). */
.calc-page nav.class-select { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  background: none; border: 0; padding: 0; }
.calc-page nav.class-select a { flex: 0 0 60px; width: 60px; max-width: 60px; }
@media (max-width: 560px) {
  .calc-page nav.class-select { gap: 5px; }
  .calc-page nav.class-select a { flex: 1 1 0; width: auto; min-width: 0; }
}
/* The home page uses the same icon row as the class pages, just without the surrounding box. */
.home-classes nav.class-select { background: none; border: 0; padding: 0; }
/* Home page: icons sit close together in a tight row (left-aligned under "Pick a class"). */
.home-classes nav.class-select {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.home-classes nav.class-select a { flex: 0 0 60px; width: 60px; max-width: 60px; }
@media (max-width: 560px) {
  .home-classes nav.class-select { gap: 5px; }
  .home-classes nav.class-select a { flex: 1 1 0; width: auto; min-width: 0; }
}
/* Nothing is "selected" on the home page, so show every icon at full brightness; gold frame on hover. */
.home-classes nav.class-select a { opacity: 1; filter: none; }
.home-classes nav.class-select a:hover { border-color: #f0c050; box-shadow: 0 0 0 1px #f0c050, 0 0 14px rgba(240, 192, 80, .45); }
/* Older home-page button style (kept for reference, no longer used) */
.class-buttons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.class-btn { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 58px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, var(--panel)), var(--panel) 65%);
  border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: var(--radius);
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; color: var(--c); }
.class-btn:hover { text-decoration: none; border-color: color-mix(in srgb, var(--c) 60%, var(--line)); border-left-color: var(--c);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 24%, var(--panel)), var(--panel-2) 65%); }
.class-btn .ci { width: 36px; height: 36px; flex: none; color: var(--c); padding: 5px; border-radius: 7px;
  background: color-mix(in srgb, var(--c) 16%, #0b0e14); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.class-btn img.ci { padding: 0; object-fit: cover; }
@media (max-width: 560px) {
  .class-buttons { gap: 6px; }
  /* Phones: icon on top, name under it, so all nine still fit three to a row */
  .class-btn { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 4px; min-height: 0; min-width: 0;
    font-size: .72rem; letter-spacing: 0; border-left-width: 1px; border-top: 3px solid var(--c); text-align: center; }
  .class-btn:hover { border-top-color: var(--c); }
  .class-btn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .class-btn .ci { width: 30px; height: 30px; padding: 5px; }
}
.news-list { display: grid; gap: 8px; }
.news-row { display: flex; justify-content: space-between; gap: 12px; background: var(--panel); border: 1px solid var(--line);
  padding: 12px 16px; border-radius: 8px; color: var(--text); }
.news-row time { color: var(--faint); white-space: nowrap; font-size: .9rem; }
.news-row:hover { border-color: var(--line-2); text-decoration: none; }

/* build cards */
.build-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.build-card { display: block; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--c);
  border-radius: var(--radius); padding: 14px 16px; color: var(--text); transition: border-color .15s, transform .15s; }
.build-card:hover { border-color: var(--line-2); border-left-color: var(--c); transform: translateY(-2px); text-decoration: none; }
.build-card h3 { margin: 10px 0 6px; font-size: 1.05rem; overflow-wrap: anywhere; }
.build-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.votes { margin-left: auto; color: var(--accent-2); font-weight: 700; font-size: .9rem; }
.build-meta, .build-by { margin: 0; color: var(--muted); font-size: .9rem; }
.build-by { color: var(--faint); }
.class-badge { color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px; border-radius: 99px; }
.class-badge { display: inline-flex; align-items: center; gap: 5px; }
.class-badge .badge-ic { width: 18px; height: 18px; flex: none; margin-left: -4px; border-radius: 50%; color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: #0b0e14; }
.class-badge img.badge-ic { object-fit: cover; }
.class-badge svg.badge-ic { padding: 2px; }
.tag { font-size: .75rem; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line-2); padding: 2px 8px; border-radius: 99px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line-2); color: var(--muted); font-size: .9rem; font-weight: 600; }
.chip:hover { color: var(--text); text-decoration: none; border-color: var(--c, var(--accent)); }
.chip.on { color: #111; background: var(--c, var(--accent)); border-color: var(--c, var(--accent)); }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; color: var(--muted); }
.class-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.class-tabs a { color: var(--muted); padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); font-weight: 600; font-size: .92rem; }
.class-tabs a:hover { color: var(--c); text-decoration: none; border-color: var(--c); }
.class-tabs a.on { color: var(--c); border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.class-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.class-pick { display: block; text-align: center; padding: 18px 10px; background: var(--panel); border: 1px solid var(--line);
  border-bottom: 3px solid var(--c); border-radius: var(--radius); color: var(--c); font-weight: 800; font-size: 1.05rem; }
.class-pick:hover { background: var(--panel-2); text-decoration: none; }

/* build page */
.build-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; background: var(--panel);
  border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; }
.build-head .eyebrow { color: var(--c); }
.build-title { flex: 1 1 300px; min-width: 0; }
.build-title h1 { margin-bottom: 4px; overflow-wrap: anywhere; }
.vote-box { display: flex; flex-direction: column; align-items: center; min-width: 64px; color: var(--muted); font-size: .8rem; }
/* Build page vote panel: centred between the talent trees and the guide */
.vote-stage { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 48px); flex-wrap: wrap;
  margin: 22px auto 4px; max-width: 760px; padding: 0; text-align: center; scroll-margin-top: 80px; }
.vs-count { display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.vs-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(3rem, 8vw, 4.6rem); line-height: 1;
  color: #fff3d6; font-variant-numeric: tabular-nums; text-shadow: 0 2px 16px rgba(240, 144, 60, .45); }
.vs-label { margin-top: 4px; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
  font-size: .9rem; color: var(--c); }
.vs-action { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vs-action form { margin: 0; }
.vs-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 190px; height: 56px; padding: 0 34px;
  border-radius: 12px; border: 2px solid var(--accent); background: var(--accent); color: #1a0f05; cursor: pointer;
  font-family: var(--font-head); font-weight: 800; font-size: 1.45rem; letter-spacing: .06em;
  box-shadow: 0 6px 20px rgba(240, 144, 60, .35); }
.vs-btn:hover { background: var(--accent-2); border-color: var(--accent-2); text-decoration: none; color: #1a0f05; }
.vs-btn.on { background: transparent; color: var(--accent-2); box-shadow: none; }
.vs-btn.on:hover { background: rgba(240, 144, 60, .12); color: var(--accent-2); }
.vs-note { margin: 0; color: var(--muted); font-size: .9rem; max-width: 300px; }
@media (max-width: 560px) {
  .vote-stage { padding: 18px 14px; gap: 14px; }
  .vs-btn { min-width: 160px; height: 50px; font-size: 1.25rem; }
}
.vote-btn { min-width: 70px; height: 34px; margin-top: 6px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--panel-2); color: var(--accent-2); font: inherit; font-family: var(--font-head); font-weight: 700; font-size: .9rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vote-btn:hover { background: var(--accent); color: #1a0f05; text-decoration: none; }
.vote-btn.on { color: #1a0f05; background: var(--accent); border-color: var(--accent); }
.vote-count { font-size: 1.3rem; color: var(--text); font-weight: 800; line-height: 1.3; }
.guide, .article { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-top: 18px; }
.guide h3, .prose h2, .prose h3 { margin-top: 1.2em; }
.guide p, .prose p { margin: 0 0 1em; }
.guide { overflow-wrap: anywhere; }
.danger-zone { margin-top: 10px; text-align: right; }
.build-form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-top: 18px; }

/* news */
.news-item { border-bottom: 1px solid var(--line); padding: 18px 0; }
.news-item time, .article time { color: var(--faint); font-size: .88rem; }
.news-item h2 { margin: 4px 0 8px; }
.news-item h2 a { color: var(--text); }
.excerpt p { margin: 0; color: var(--muted); }

/* auth */
.auth-card { max-width: 440px; margin: 20px auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.error-page { text-align: center; padding-top: 80px; }

/* spellbook */
.book-tools input[type=search] { max-width: 320px; }
.book-tab { margin-top: 26px; }
.book-tab > h2 { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.spells { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.spell { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.spell header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.spell h3 { margin: 0 0 8px; }
.spell-level { color: var(--faint); font-size: .85rem; white-space: nowrap; }
.ranks { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ranks th { text-align: left; color: var(--faint); font-weight: 600; font-size: .78rem; text-transform: uppercase; padding: 4px 6px; }
.ranks td { border-top: 1px solid var(--line); padding: 6px; vertical-align: top; color: var(--muted); }
.ranks td.rk { white-space: nowrap; color: var(--text); }
.ranks td.lv { text-align: center; color: var(--accent-2); font-weight: 700; }
.ranks tr.later td { opacity: .35; }
.ranks .info { color: var(--faint); font-size: .8rem; margin-top: 3px; }
.general { columns: 2 280px; padding-left: 18px; color: var(--muted); }
.general li { margin-bottom: 6px; break-inside: avoid; }
.general strong { color: var(--text); }
@media (max-width: 420px) { .spells { grid-template-columns: 1fr; } }

/* class selector: one row of nine on wide screens, 3x3 on phones */
.class-select { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px; margin-bottom: 14px; }
.class-select a { display: flex; align-items: center; gap: 8px; min-width: 0; height: 40px; padding: 0 6px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; color: var(--text);
  font-size: .9rem; font-weight: 600; transition: background .12s, border-color .12s, color .12s; }
.class-select a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.class-select a:hover { background: #242b3b; border-color: color-mix(in srgb, var(--c) 55%, var(--line)); text-decoration: none; }
.class-select .ci { width: 28px; height: 28px; flex: none; color: var(--c); padding: 4px; border-radius: 5px;
  background: color-mix(in srgb, var(--c) 16%, #0b0e14); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.class-select a.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel-2));
  box-shadow: 0 0 0 1px var(--accent), 0 0 14px rgba(240, 144, 60, .25); color: #fff; }
.toolbar.attached { background: var(--panel); border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius);
  padding: 8px 10px 10px; margin-top: 0; }
@media (max-width: 1100px) {
  .class-select { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* selected-class banner: the class name, centred */
.class-banner { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; padding: 18px 18px 14px;
  text-align: center; border: 1px solid var(--line); border-radius: var(--radius);
  background: radial-gradient(520px 150px at 50% 0%, color-mix(in srgb, var(--c) 24%, transparent), transparent 72%),
    linear-gradient(180deg, var(--panel), var(--bg-2)); }
/* The name is centred exactly; the emblem hangs to its left without pushing it off-centre */
.cb-title { position: relative; display: flex; align-items: center; justify-content: center; }
.cb-title .cb-emblem { position: absolute; right: calc(100% + 16px); top: 50%; transform: translateY(-50%); }
.cb-emblem { width: 64px; height: 64px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--c) 14%, #0b0e14); border: 2px solid var(--c);
  box-shadow: 0 0 0 3px #0b0e14, 0 0 0 4px color-mix(in srgb, var(--c) 45%, transparent); }
.cb-icon { width: 34px; height: 34px; color: var(--c); }
.class-banner h1 { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1;
  color: var(--c); text-transform: uppercase; letter-spacing: .08em; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.cb-links { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.cb-link { font-family: var(--font-head); font-weight: 800; font-size: 1.12rem; letter-spacing: .06em; color: #ffd27a;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .8); }
.cb-link:hover { color: #fff3d6; text-decoration: underline; text-underline-offset: 4px; }
.cb-sep { color: var(--faint); font-size: 1.1rem; }
@media (max-width: 560px) {
  .class-banner { padding: 14px 12px 12px; }
  .cb-title .cb-emblem { right: calc(100% + 10px); }
  .cb-emblem { width: 48px; height: 48px; }
  .cb-icon { width: 26px; height: 26px; }
}

/* artwork from static/img/game (when added) */
.class-select img.ci { padding: 0; object-fit: cover; }
img.cb-icon { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cb-emblem:has(img) { overflow: hidden; }
.tree-icon { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); object-fit: cover; }
.tal-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.spell-icon { width: 24px; height: 24px; border-radius: 4px; vertical-align: -6px; margin-right: 8px; border: 1px solid var(--line-2); }

/* guide editor */
.editor { border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); }
.ed-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-2); padding: 6px; }
.ed-tabs, .ed-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.ed-tools.off { opacity: .35; pointer-events: none; }
.ed-tab, .ed-btn { background: none; border: 1px solid transparent; color: var(--muted); font: inherit; font-size: .85rem;
  font-weight: 700; padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.ed-tab:hover, .ed-btn:hover { color: var(--text); background: var(--panel-2); }
.ed-tab.on { color: var(--text); background: var(--panel-2); border-color: var(--line-2); }
.ed-btn { min-width: 32px; border-color: var(--line); }
.ed-bold { font-weight: 900; }
.ed-italic { font-style: italic; font-family: Georgia, serif; }
.editor textarea { border: 0; border-radius: 0 0 8px 8px; background: transparent; min-height: 260px; }
.editor textarea:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.ed-preview { min-height: 260px; padding: 12px 14px; }
.editor .hint { padding: 6px 10px 8px; margin: 0; border-top: 1px solid var(--line); }

/* build form sections: Guide, Macros, Add-Ons */
.form-section { margin: 22px 0; }
.fs-head { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line-2);
  padding-bottom: 6px; margin-bottom: 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fs-head .hint { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.rep { display: grid; gap: 8px; margin-bottom: 10px; }
.rep-row { display: flex; gap: 8px; align-items: flex-start; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px; }
.rep-fields { flex: 1; display: grid; gap: 6px; min-width: 0; position: relative; }
.addon-fields { grid-template-columns: 1fr 1.4fr; }
.addon-fields .wide { grid-column: 1 / -1; }
.rep-remove { flex: none; width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--line-2); background: none;
  color: var(--muted); font-size: 1.2rem; cursor: pointer; line-height: 1; }
.rep-remove:hover { color: var(--bad); border-color: var(--bad); }
.mono, .macro-body { font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-size: .9rem; }
.macro-count { position: absolute; right: 8px; bottom: 6px; font-size: .72rem; color: var(--faint); pointer-events: none; }
.macro-count.bad { color: var(--bad); font-weight: 700; }
@media (max-width: 560px) { .addon-fields { grid-template-columns: 1fr; } }
/* Macro boxes: four to a row (two on tablets, one on phones) */
.rep[data-repeat=macro] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.macro-row { position: relative; flex-direction: column; padding: 8px; }
.macro-row .rep-fields { width: 100%; }
.macro-row .rep-fields input { padding-right: 38px; }
.macro-row textarea { min-height: 110px; resize: vertical; }
.macro-row .rep-remove { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; font-size: 1rem; }
@media (max-width: 1000px) { .rep[data-repeat=macro] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rep[data-repeat=macro] { grid-template-columns: 1fr; } }

/* one Guide box holding the explanation plus Macros / Add-Ons drop-downs */
.guide-box { margin: 22px 0; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 14px; }
.guide-box .fs-head { margin-top: 0; }
.drop { margin-top: 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--panel); }
.drop > summary { list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer;
  padding: 10px 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.drop > summary::-webkit-details-marker { display: none; }
.drop > summary::before { content: ""; width: 0; height: 0; border: 6px solid transparent; border-left-color: var(--c, var(--accent));
  margin-right: -2px; transition: transform .15s; transform-origin: 25% 50%; }
.drop[open] > summary::before { transform: rotate(90deg); }
.drop > summary:hover { color: var(--accent-2); }
.drop-title { color: var(--c, var(--text)); }
.drop-count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--line-2);
  color: var(--muted); font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; }
.drop-count:empty { display: none; }
.drop > summary .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin: 0; }
.drop-body { padding: 0 14px 14px; }
.guide .drop { margin-top: 14px; background: var(--bg-2); }
.guide .drop.gs { margin-top: 14px; }

/* creators' socials */
.socials { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.soc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-weight: 800;
  font-size: .85rem; color: #fff; background: #3a4459; border: 1px solid transparent; }
.soc:hover { text-decoration: none; filter: brightness(1.15); }
.soc::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .85; }
.soc-twitch { background: #9146ff; }
.soc-youtube { background: #e62117; }
.soc-x { background: #000; border-color: #444; }
.soc-tiktok { background: #111; border-color: #25f4ee; }
.soc-discord { background: #5865f2; }
.soc-website { background: var(--panel-2); border-color: var(--line-2); color: var(--text); }
.socials.small .soc { padding: 3px 9px; font-size: .78rem; }
.soc-label { padding: 2px 8px; font-size: .78rem; pointer-events: none; }
.soc-field label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.soc-preview { margin-top: 16px; }
.wide-card { max-width: none; }
.alert-ok { background: rgba(87, 209, 125, .1); border: 1px solid rgba(87, 209, 125, .35); color: #b7f0c8; }
.creator { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line-2); }
.creator .socials { margin: 0; }
.creator-label { font-weight: 800; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Road Map page: the official image, with an optional text version underneath */
.rm-image { margin: 10px 0 0; text-align: center; }
.rm-image img { display: block; width: 100%; max-width: 1600px; height: auto; margin: 0 auto; border-radius: 12px;
  border: 1px solid var(--line-2); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); }
.rm-image figcaption { margin-top: 10px; color: var(--faint); font-size: .82rem; }
.rm-text { margin-top: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 16px; }
.rm-text > summary { cursor: pointer; padding: 14px 0; font-family: var(--font-head); font-weight: 700; color: var(--text); }
.rm-text[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.rm-text .rm-track { margin-top: 16px; }
.rm-text .rm-note { margin-bottom: 16px; }
.rm-hero { text-align: center; padding: 18px 0 8px; }
.rm-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.4rem); color: #ffd27a; margin-bottom: 6px;
  text-shadow: 0 2px 14px rgba(240, 144, 60, .35); }
.rm-track { display: grid; grid-template-columns: 3fr 2fr 1fr 1fr; gap: 14px; margin-top: 22px; align-items: start; }
.rm-season { min-width: 0; }
.rm-season-name { position: relative; margin: 0 0 12px; text-align: center; font-size: 1rem; letter-spacing: .4em;
  text-transform: uppercase; color: #e8d3a8; }
.rm-season-name span { position: relative; z-index: 1; padding: 4px 14px; background: #3b2a17; border: 1px solid #6b4a2b; border-radius: 4px; }
.rm-season-name::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, #6b4a2b, transparent); }
.rm-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.rm-card { background: linear-gradient(180deg, #1b4f78, #123754); border: 1px solid #2a6ea3; border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }
.rm-card-head { padding: 12px 12px 10px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.rm-card h3 { margin: 4px 0 2px; font-size: 1.05rem; color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.rm-when { margin: 0; font-family: var(--font-head); font-weight: 700; color: #cfe6ff; font-size: .9rem; }
.rm-status { display: inline-block; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  padding: 1px 7px; border-radius: 99px; background: rgba(255, 255, 255, .14); color: #e3efff; }
.rm-items { list-style: none; margin: 0; padding: 12px; display: grid; gap: 8px; text-align: center; }
.rm-items li { color: #eef5ff; font-weight: 600; font-size: .92rem; line-height: 1.35; }
.rm-big { background: linear-gradient(180deg, #ecdcb6, #cdb789); border-color: #e0c995; }
.rm-big h3 { color: #3b2a17; font-family: var(--font-display); font-size: 1.25rem; }
.rm-big .rm-when { color: #5a3a17; }
.rm-big .rm-items li { color: #3b2a17; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .08em; text-transform: uppercase; }
.rm-big .rm-status { background: rgba(59, 42, 23, .15); color: #3b2a17; }
.rm-big.rm-hc { background: linear-gradient(180deg, #2a2a2a, #121212); border-color: #555; }
.rm-big.rm-hc h3 { color: #ff4a3d; }
.rm-big.rm-hc .rm-when, .rm-big.rm-hc .rm-items li { color: #f0f0f0; }
.rm-big.rm-hc .rm-status { background: rgba(255, 255, 255, .12); color: #eee; }
.rm-summer .rm-card:not(.rm-big) { background: linear-gradient(180deg, #1c1c1c, #0d0d0d); border-color: #4a3a2a; }
.rm-done { opacity: .6; }
.rm-done .rm-status { background: rgba(255, 255, 255, .1); }
.rm-now, .rm-live { box-shadow: 0 0 0 2px var(--good), 0 8px 26px rgba(87, 209, 125, .3); }
.rm-now .rm-status, .rm-live .rm-status { background: var(--good); color: #0b2412; }
.rm-note { margin-top: 22px; text-align: center; color: var(--faint); font-size: .82rem; }
@media (max-width: 1100px) {
  .rm-track { grid-template-columns: 1fr; }
  .rm-cards { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* Build page: "Builds by <creator>". No surrounding box, just a heading and four clean cards.
   The guide keeps the full width of the talent trees; on wide screens the cards sit in the right-hand
   margin, otherwise they drop below the guide in a row. */
/* Guide on the left (a little narrower), "Builds by" cards in a wider column on the right.
   Below 1200px the cards drop under the guide in a row. */
.build-lower.has-side { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
/* Wide screens: the guide's right edge lines up with the centre of the right-hand talent tree
   (trees are three equal columns with 14px gaps: centre = 5/6 of (width - 28px) + 28px), and the
   360px "Builds by" column sits beyond it, out into the page margin. */
@media (min-width: 1660px) {
  .build-lower.has-side { grid-template-columns: calc((100% - 28px) * 5 / 6 + 28px) 360px; }
}
.side-panel { margin-top: 22px; }
@media (max-width: 1199px) {
  .build-lower.has-side { display: block; }
}
.side-head { margin: 0 0 10px; font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.side-head a { color: var(--accent-2); }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.side-build { min-width: 0; }
@media (max-width: 1199px) { .side-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .side-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .side-list { grid-template-columns: minmax(0, 1fr); } }
.sb-link { display: flex; align-items: center; gap: 10px; height: 100%; padding: 8px 10px 8px 8px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text); transition: border-color .12s, background .12s; }
.sb-link:hover { text-decoration: none; background: #1a2030; border-color: color-mix(in srgb, var(--c) 50%, var(--line-2)); }
.sb-link .br-thumb { width: 52px; height: 52px; }
.sb-link .br-emblem { width: 28px; height: 28px; }
.sb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-text strong { font-size: .92rem; line-height: 1.25; color: var(--text); overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sb-link:hover .sb-text strong { color: var(--accent-2); }
.sb-by { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-text .br-tags { margin-top: 2px; }
.sb-votes { display: flex; flex-direction: column; align-items: center; min-width: 42px; }
.sb-votes span { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.sb-votes strong { font-size: 1.15rem; line-height: 1.1; }
.side-more { display: block; margin-top: 10px; font-size: .85rem; }

/* Build page: Guide / Comments tabs sitting on top of the guide box */
.guide-tabs { margin-top: 22px; }
.gtabs { margin: 0; }
.gtabs .cbx-tab { color: var(--muted); text-decoration: none; cursor: pointer; }
.gtabs .cbx-tab:hover { color: var(--text); }
.gtabs .cbx-tab.on { color: var(--text); background: var(--panel); box-shadow: inset 0 2px 0 var(--c, var(--accent)); }
.gtabs .cbx-tab:not(.on) { background: var(--bg-2); }
.guide-tabs > .guide, .guide-tabs > .comments { margin-top: 0; border-top-left-radius: 0; }
.guide-tabs > .guide { border-top: 1px solid var(--line); }
.guide-tabs > .comments .cbx-body { border-top-left-radius: 0; }
/* Without JavaScript both show, stacked; with it, only the chosen tab's panel shows. */
.guide-tabs:not(.tabbed) > .comments { margin-top: 18px; }
.guide-tabs [data-gpanel][hidden] { display: none; }

/* comments */
.comments { margin-top: 22px; }
.c-form { display: grid; gap: 8px; margin-bottom: 16px; }
.c-form textarea { min-height: 80px; }
.c-form-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.c-form-actions .hint { margin: 0; }
.c-reply { margin: 8px 0 0; }
.c-reply[hidden] { display: none; }
.c-login { color: var(--muted); margin: 0 0 14px; }
.c-list, .c-replies { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.c-replies { margin: 10px 0 0 18px; padding-left: 14px; border-left: 2px solid var(--line-2); }
.comment { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; scroll-margin-top: 80px; }
.c-replies .comment { background: var(--panel); }
.comment:target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.c-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; }
.c-author { font-weight: 800; color: var(--text); }
.c-tag { font-size: .62rem; font-weight: 800; text-transform: uppercase; background: var(--c, var(--accent)); color: #111; padding: 0 6px; border-radius: 4px; }
.c-time { color: var(--faint); font-size: .82rem; }
.c-body { margin-top: 4px; overflow-wrap: anywhere; }
.c-body p { margin: 0 0 .5em; }
.c-body a { color: #6cb6ff; text-decoration: underline; }
.c-actions { display: flex; gap: 12px; align-items: center; }
.c-act { background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; font-weight: 700; color: var(--faint); cursor: pointer; }
.c-act:hover { color: var(--text); text-decoration: none; }
.c-del { display: inline; margin: 0; }
.c-report:hover { color: var(--bad); }
.guide-report { margin: 14px 0 0; text-align: right; }
.c-report-note { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted); }

/* report form and moderation */
.radio { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; }
.radio input { width: auto; accent-color: var(--accent); }
fieldset.field { border: 0; padding: 0; margin: 0 0 16px; }
fieldset.field legend { font-weight: 600; margin-bottom: 6px; }
.menu-badge { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--bad);
  color: #fff; font-size: .7rem; font-weight: 800; align-items: center; justify-content: center; margin-left: 4px; }
.report-card { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--bad); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px; }
.report-card h3 { margin: 8px 0 2px; overflow-wrap: anywhere; font-family: var(--font); }
.rc-head { display: flex; gap: 8px; align-items: center; }
.rc-count { color: var(--bad); font-weight: 800; font-size: .9rem; }
.rc-reasons { margin: 8px 0 12px; padding-left: 18px; color: var(--muted); font-size: .9rem; }
.rc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-actions form { margin: 0; }
.rc-guide { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px;
  max-height: 260px; overflow: auto; }
.rc-guide > .small { margin: 0 0 4px; color: var(--faint); }

/* Support the Creator (affiliate links) */
.drop-note { margin: 0 0 10px; }
.support-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.support-item { display: flex; flex-direction: column; gap: 4px; max-width: 280px; }
.support-btn { background: #1f9d55; color: #fff; border-color: #1f9d55; }
.support-btn:hover { background: #26b864; border-color: #26b864; color: #fff; }
.support-note { color: var(--muted); font-size: .85rem; }
.aff-note { margin: 12px 0 0; color: var(--faint); font-size: .8rem; }

/* published Macros and Add-Ons */
.gs { margin-top: 26px; }
.gs-head { font-size: 1.25rem; color: var(--c, var(--accent)); text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--line-2); padding-bottom: 6px; margin: 0 0 12px; }
.gs-empty { color: var(--faint); font-style: italic; margin: 0; }
.macros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1000px) { .macros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .macros { grid-template-columns: 1fr; } }
.macro { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.macro-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;
  border-bottom: 1px solid var(--line); background: var(--panel-2); }
.macro-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.macro-body { margin: 0; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; color: #f3d98b; line-height: 1.5; }
.macro-body code { background: none; padding: 0; font-size: inherit; }
.addons { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.addons li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; }
.addon-name { font-weight: 800; }
.addon-name a { color: #6cb6ff; }
.addon-note { color: var(--muted); font-size: .92rem; }

/* published guide (build page and news) */
.guide { border-top: 3px solid var(--c, var(--accent)); }
.guide-title { color: var(--c, var(--accent)); font-size: 1.6rem; border-bottom: 1px solid var(--line-2); padding-bottom: 8px; margin-bottom: 14px; }
.prose, .guide-body { line-height: 1.7; overflow-wrap: anywhere; }
.prose h3, .guide-body h3 { font-size: 1.25rem; margin: 1.4em 0 .5em; color: var(--text); }
.prose h4, .guide-body h4 { font-size: 1.05rem; margin: 1.2em 0 .4em; color: var(--muted); }
.prose ul, .prose ol, .guide-body ul, .guide-body ol { padding-left: 22px; margin: 0 0 1em; }
.prose li, .guide-body li { margin-bottom: 4px; }
.prose a, .guide-body a { color: #6cb6ff; text-decoration: underline; text-decoration-color: rgba(108, 182, 255, .4); text-underline-offset: 2px; }
.prose a:hover, .guide-body a:hover { text-decoration-color: currentColor; }
.prose em, .guide-body em { color: #f0e6d0; }
.video { position: relative; max-width: 720px; aspect-ratio: 16 / 9; margin: 18px auto; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line-2); background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* visitor builds on the class page (list format) */
.class-builds { margin-top: 22px; }
.cbx-tabs { display: flex; align-items: flex-end; gap: 4px; }
.cbx-tab { background: var(--panel); border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0;
  padding: 8px 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; color: var(--text); }
.cbx-tab.on { box-shadow: inset 0 2px 0 var(--accent); }
.cbx-tab .count { color: var(--faint); font-weight: 700; margin-left: 4px; }
.cbx-new { margin-left: auto; margin-bottom: 6px; }
.cbx-body { background: var(--panel); border: 1px solid var(--line); border-radius: 0 var(--radius) var(--radius) var(--radius); padding: 14px; }
.cbx-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.cbx-filters label { display: flex; flex-direction: column; gap: 4px; }
.cbx-filters label > span { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.cbx-filters select, .cbx-filters input { padding: 7px 10px; font-size: .9rem; }
.cbx-filters .grow { flex: 0 1 260px; }
.pager-nums { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0 12px; }
.build-rows + .pager-nums { margin: 12px 0 0; }
.pg { min-width: 30px; height: 28px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; background: var(--panel-2); border: 1px solid var(--line-2); color: var(--muted); font-size: .85rem; font-weight: 700; }
.pg:hover { color: var(--text); text-decoration: none; border-color: var(--accent); }
.pg.on { background: var(--accent); border-color: var(--accent); color: #1a0f05; }
.pg-gap { color: var(--faint); padding: 0 2px; }
.build-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.build-row { position: relative; display: flex; align-items: center; gap: 14px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px 8px 8px; transition: border-color .12s, background .12s; }
.build-row:hover { border-color: color-mix(in srgb, var(--c) 50%, var(--line-2)); background: #141925; }
.br-link { position: absolute; inset: 0; z-index: 1; border-radius: 8px; }
.br-thumb { position: relative; width: 64px; height: 64px; flex: none; border-radius: 6px; overflow: hidden; display: flex;
  align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 35%, #1c2230), #0b0e14);
  border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); }
.br-thumb img { width: 100%; height: 100%; object-fit: cover; }
.br-emblem { width: 36px; height: 36px; color: var(--c); }
img.br-emblem { width: 100%; height: 100%; object-fit: cover; }
.br-main { flex: 1; min-width: 0; }
.br-title { position: relative; z-index: 2; display: block; color: var(--text); font-weight: 800; font-size: 1.02rem; line-height: 1.3;
  overflow-wrap: anywhere; }
.br-title:hover { color: var(--accent-2); text-decoration: none; }
.br-by { color: var(--muted); font-size: .86rem; margin: 2px 0 5px; }
.br-by a { position: relative; z-index: 2; }
.br-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.br-tag { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 4px; line-height: 1.6; }
.br-ver { background: #2f8f5b; color: #eafff2; }
.br-split { background: #e0b43c; color: #2a1d05; }
.br-role { background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-2); }
.br-video { background: #e62117; color: #fff; }
.featured-video { margin: 0 0 18px; }
.featured-video .video { max-width: 860px; margin: 0 auto; }
.video-field { margin-bottom: 12px; }
.br-old { background: rgba(255, 107, 107, .18); color: #ffb3b3; }
.cbx-buttons { margin-left: auto; margin-bottom: 6px; display: flex; gap: 8px; }
.cbx-buttons .cbx-new { margin: 0; }
/* Vote button above a class's build list: big, red, white text */
.cbx-buttons .btn-vote { background: #d63a3a; border-color: #d63a3a; color: #fff; padding: 4px 30px; min-height: 46px;
  font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; letter-spacing: .06em; line-height: 1; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(214, 58, 58, .35); }
.cbx-buttons .btn-vote:hover { background: #ee4b4b; border-color: #ee4b4b; color: #fff; }
.vote-hint { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: rgba(240, 144, 60, .1);
  border: 1px solid rgba(240, 144, 60, .35); color: #ffd9b3; font-size: .9rem; }
.vote-hint[hidden] { display: none; }
.br-votes { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; min-width: 58px; margin: 0; }
.br-vote-link { color: inherit; }
.br-vote-link:hover { text-decoration: none; }
.br-arrow { width: 34px; height: 26px; margin: 2px 0; border-radius: 6px; border: 1px solid var(--line-2); background: var(--panel-2);
  color: var(--muted); font-size: .9rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.br-arrow:hover, .br-vote-link:hover .br-arrow { color: var(--accent-2); border-color: var(--accent); }
.br-arrow.on { background: var(--accent); border-color: var(--accent); color: #1a0f05; }
.show-votes .br-arrow { animation: votePulse 1.2s ease-out 2; }
@keyframes votePulse { 0% { box-shadow: 0 0 0 0 rgba(240, 144, 60, .7); } 100% { box-shadow: 0 0 0 10px rgba(240, 144, 60, 0); } }
.build-row { scroll-margin-top: 80px; }
.br-votes span { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.br-votes strong { font-size: 1.45rem; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .cbx-body { padding: 10px; }
  .cbx-filters label { flex: 1 1 45%; }
  .cbx-filters .grow { flex: 1 1 100%; }
  .build-row { gap: 10px; padding: 8px 10px 8px 8px; }
  .br-thumb { width: 52px; height: 52px; }
  .br-votes { min-width: 44px; }
  .br-votes strong { font-size: 1.15rem; }
}

/* foldable sections on the class page */
.fold { margin-top: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.fold > summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold-icon { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 14%, #0b0e14); overflow: hidden; }
.fold-emblem { width: 24px; height: 24px; color: var(--c); }
img.fold-emblem { width: 100%; height: 100%; object-fit: cover; }
.fold-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fold-title h2 { margin: 0; font-size: 1.15rem; }
.fold-title > span { color: var(--muted); font-size: .9rem; }
.fold-pill { border: 1px solid var(--line-2); border-radius: 99px; padding: 4px 14px; font-size: .85rem; font-weight: 700; color: var(--muted); }
.fold-pill .hide, .fold[open] .fold-pill .show { display: none; }
.fold[open] .fold-pill .hide { display: inline; }
.fold > summary:hover .fold-pill { color: var(--text); border-color: var(--accent); }

/* spellbook */
.sb { padding: 0 16px 16px; }
.sb-controls { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { background: none; border: 0; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 700; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed=true] { background: var(--accent); color: #1a0f05; }
.sb-book { display: flex; gap: 0; align-items: flex-start; }
.sb-book[hidden], .sb-levels[hidden] { display: none; }
.sb-cover { flex: 1; min-width: 0; padding: 12px; border-radius: 12px;
  background: linear-gradient(160deg, #4a2f1a, #2b1a0e); border: 1px solid #6b4a2b; box-shadow: var(--shadow), inset 0 0 0 2px rgba(0, 0, 0, .35); }
.sb-spread { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 470px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(90deg, #e9dcc0 0%, #dccaa4 48%, #b9a27a 50%, #dccaa4 52%, #e9dcc0 100%);
  color: #3b2a17; box-shadow: inset 0 0 40px rgba(90, 60, 25, .35); }
.sb-spread.turn-next .sb-page { animation: turnNext .28s ease-out; }
.sb-spread.turn-prev .sb-page { animation: turnPrev .28s ease-out; }
@keyframes turnNext { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes turnPrev { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.sb-page { padding: 18px 22px; min-width: 0; }
.sb-page.left { border-right: 1px solid rgba(90, 60, 25, .25); }
.sb-page.right { padding-top: 70px; }
.sb-title { margin: 0; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .08em; color: #5a3a17;
  border-bottom: 1px solid rgba(90, 60, 25, .35); padding-bottom: 6px; }
.sb-sub { margin: 6px 0 12px; font-size: .8rem; color: #7a6040; }
.sb-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sb-entry { display: flex; gap: 10px; align-items: flex-start; padding: 4px 6px; border-radius: 6px; cursor: help; outline: none; }
.sb-entry:hover, .sb-entry:focus-visible { background: rgba(90, 60, 25, .12); }
.sb-entry.later { opacity: .5; }
.sb-ico { width: 40px; height: 40px; flex: none; border-radius: 6px; border: 2px solid #6b4a2b; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #3a2a18), #2a1d10); color: #fff3dc; }
.sb-ico img { width: 100%; height: 100%; object-fit: cover; }
.sb-txt { display: flex; flex-direction: column; min-width: 0; }
.sb-txt b { font-size: .92rem; text-transform: uppercase; letter-spacing: .03em; color: #3b2a17; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sb-rk { font-size: .78rem; color: #7a6040; min-height: 1em; }
.sb-pips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.sb-pips i { font-style: normal; font-size: .66rem; font-weight: 700; padding: 0 4px; border-radius: 3px; background: rgba(90, 60, 25, .14); color: #6b5232; line-height: 1.5; }
.sb-pips i.cur { background: #3b2a17; color: #f5e6c4; }
.sb-pips i.later { opacity: .45; }
.sb-none { color: #7a6040; font-style: italic; padding: 10px 0; }
.st { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 0 5px; border-radius: 4px; line-height: 1.6; }
.st-new { background: var(--accent); color: #1a0f05; }
.st-changed { background: #3f6fb0; color: #fff; }
.st-talent { background: #5c8a3a; color: #fff; }
.sb-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 4px 0; color: #e9dcc0; font-size: .88rem; }
.sb-all { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.sb-all input { width: auto; accent-color: var(--accent); }
.sb-pager { display: flex; align-items: center; gap: 10px; }
.sb-turn { width: 34px; height: 30px; border-radius: 6px; border: 1px solid #8a6a43; background: #3b2a17; color: #f5e6c4; font-size: 1.2rem; cursor: pointer; line-height: 1; }
.sb-turn:disabled { opacity: .35; cursor: default; }
.sb-turn:not(:disabled):hover { background: #5a3d20; }
/* Tabs keep a fixed width and always show their name, so hovering never resizes the book. */
.sb-tabs { flex: 0 0 168px; width: 168px; display: flex; flex-direction: column; gap: 6px; padding-top: 24px; margin-left: -2px; }
.sb-tab { display: flex; align-items: center; gap: 8px; width: 100%; background: #2b1a0e; border: 1px solid #6b4a2b; border-left: 0;
  border-radius: 0 8px 8px 0; padding: 5px 8px 5px 6px; cursor: pointer; color: #e9dcc0; font: inherit; font-size: .8rem;
  font-weight: 700; text-align: left; transition: background-color .15s, border-color .15s; }
.sb-tab .sb-ico { width: 34px; height: 34px; font-size: .7rem; }
.sb-tab-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-tab:hover { background: #3a2414; border-color: #8a6a43; }
.sb-tab.on { background: #4a2f1a; border-color: var(--accent); box-shadow: 0 0 10px rgba(240, 144, 60, .3); }
.sb-levels { display: grid; gap: 8px; }
.lv-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.lv-row[hidden] { display: none; }
.lv-row.later { opacity: .5; }
.lv-num { font-weight: 800; color: var(--accent-2); }
.lv-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.lv-row li { color: var(--text); font-size: .92rem; }
.lv-row li[hidden] { display: none; }
.lv-row .rk { color: var(--faint); font-size: .85rem; }
.lv-row .st { margin-left: 4px; vertical-align: 1px; }
.sb-key { color: var(--faint); font-size: .8rem; margin: 12px 0 0; }
.sb-tip .tip-desc { color: #f3d98b; }
@media (max-width: 760px) {
  .sb { padding: 0 10px 12px; }
  .sb-book { flex-direction: column-reverse; }
  .sb-tabs { flex: none; width: auto; flex-direction: row; flex-wrap: wrap; padding: 0 0 6px; margin: 0; }
  .sb-tab { width: auto; border: 1px solid #6b4a2b; border-bottom: 0; border-radius: 8px 8px 0 0; }
  .sb-cover { width: 100%; padding: 8px; }
  .sb-spread { grid-template-columns: 1fr; min-height: 0; background: linear-gradient(90deg, #dccaa4, #e9dcc0); }
  .sb-page.left { border-right: 0; }
  .sb-page { padding: 14px; }
  .lv-row { grid-template-columns: 1fr; gap: 4px; }
}

/* talent calculator */
.calc { --c: var(--accent); }
.calc-loading { color: var(--muted); padding: 40px; text-align: center; }
/* Three columns: level + points left | tree split (centred) | buttons */
.calc-bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 14px; }
.calc-stats, .calc-buttons { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* "Required Level" badge: follows the points spent */
.stat-level { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border-radius: 8px;
  background: var(--bg-2); border: 1px solid var(--line-2); }
.req-label { font-family: var(--font-head); font-weight: 700; font-size: .85rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; }
.req-num { min-width: 38px; height: 30px; padding: 0 8px; border-radius: 6px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--c); color: #111; font-family: var(--font-head); font-weight: 800;
  font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.stat { color: var(--muted); font-size: .95rem; }
.stat-left { color: var(--text); font-weight: 700; }
.stat-left.bad { color: var(--bad); }
.calc-mid { display: flex; justify-content: center; }
.calc-buttons { justify-content: flex-end; }
.stat-split { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; line-height: 1; color: var(--c);
  font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; }
@media (max-width: 1000px) {
  .calc-bar { grid-template-columns: 1fr auto; }
  .calc-mid { grid-column: 1 / -1; grid-row: 1; }
}
.calc-remove.on { background: rgba(255, 107, 107, .15); border-color: var(--bad); color: var(--bad); }
.calc-tabs { display: none; gap: 6px; margin-bottom: 12px; }
.calc-tab { flex: 1; background: var(--panel); border: 1px solid var(--line-2); color: var(--muted); padding: 8px 6px;
  border-radius: 8px; font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; }
.calc-tab.on { color: #111; background: var(--c); border-color: var(--c); }
.trees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tree { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 9%, var(--panel)), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-width: 0; }
/* Talent tree background art (when added): the picture fills the tree panel, with a dark wash so the
   talent icons and numbers stay easy to read. */
.tree.has-bg { background: linear-gradient(180deg, rgba(10, 12, 18, .35), rgba(10, 12, 18, .6)), var(--tree-bg) center / cover no-repeat, var(--bg-2); }
/* Grey header strip across the top of each talent tree: spec icon, spec name, points, reset */
.tree { overflow: hidden; }
.tree-head { display: flex; align-items: center; gap: 10px; margin: -12px -12px 12px; padding: 8px 12px;
  background: linear-gradient(180deg, #2e323b, #23262d); border-bottom: 1px solid #3a3f4a; }
.tree-head h2 { margin: 0; font-size: 1.05rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-head .tree-icon { width: 34px; height: 34px; flex: none; border-radius: 50%; overflow: hidden; display: inline-flex;
  align-items: center; justify-content: center; border: 2px solid color-mix(in srgb, var(--c) 60%, #555);
  box-shadow: 0 0 0 2px #15171c; background: #15171c; }
.tree-head .tree-icon img { width: 100%; height: 100%; object-fit: cover; }
.tree-head .tree-icon.placeholder { font-family: var(--font-head); font-weight: 800; font-size: .72rem; color: var(--c);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 30%, #1c2028), #12141a); }
.tree-points { font-weight: 800; color: var(--c); font-size: 1.1rem; }
/* Calculator bar: bigger Reset All (red) and Share (blue) buttons; Publish matches their size */
.calc-buttons .calc-edit { background: #d63a3a; border-color: #d63a3a; color: #fff; }
.calc-buttons .calc-edit:hover { background: #ee4b4b; border-color: #ee4b4b; color: #fff; text-decoration: none; }
.calc-buttons .calc-reset-all, .calc-buttons .calc-share, .calc-buttons .calc-publish, .calc-buttons .calc-edit {
  padding: 9px 18px; font-size: 1rem; min-height: 40px; border-radius: 8px; }
.calc-buttons .calc-reset-all { background: #d63a3a; border-color: #d63a3a; color: #fff; }
.calc-buttons .calc-reset-all:hover { background: #ee4b4b; border-color: #ee4b4b; color: #fff; }
.calc-buttons .calc-share { background: #2f7de1; border-color: #2f7de1; color: #fff; }
.calc-buttons .calc-share:hover { background: #4a92f0; border-color: #4a92f0; color: #fff; }
/* Per-tree reset: a red cross */
.tree-reset { background: rgba(255, 70, 70, .1); border: 1px solid rgba(255, 90, 90, .45); color: #ff5a5a; border-radius: 6px;
  width: 28px; height: 28px; cursor: pointer; font-size: .95rem; font-weight: 900; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; }
.tree-reset:hover { background: #e53b3b; border-color: #e53b3b; color: #fff; }
.grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(var(--rows), auto);
  margin: 0 auto; max-width: calc(var(--cell) * 4); }
.arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.arrows polyline { fill: none; stroke: var(--line-2); stroke-width: 3; }
.arrows polyline.lit { stroke: var(--c); }
.row-mark { grid-column: 1; justify-self: start; align-self: start; font-size: .62rem; color: var(--faint); margin: -2px 0 0 -2px; pointer-events: none; }
.tal { position: relative; aspect-ratio: 1; margin: 12%; border-radius: 9px; border: 2px solid #3a4459;
  background: linear-gradient(160deg, #2a3144, #171b26); color: var(--muted); cursor: pointer; padding: 0; font: inherit;
  display: flex; align-items: center; justify-content: center; filter: grayscale(1) brightness(.62);
  transition: filter .15s, border-color .15s; user-select: none; -webkit-tap-highlight-color: transparent; }
.tal .ab { font-weight: 800; font-size: clamp(.7rem, 1.4vw, .95rem); letter-spacing: .02em; }
.tal .rk { position: absolute; right: -9px; bottom: -9px; background: #0b0e14; border: 1px solid #3a4459; color: var(--muted);
  font-size: .68rem; font-weight: 700; padding: 0 5px; border-radius: 6px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.tal .new-flag { position: absolute; left: -6px; top: -8px; background: var(--accent); color: #1a0f05; font-size: .55rem; font-weight: 800;
  text-transform: uppercase; padding: 0 4px; border-radius: 4px; line-height: 1.5; }
.tal.open, .tal.partial, .tal.maxed { filter: none; }
.tal.open { border-color: var(--good); color: var(--text); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 35%, #2a3144), #171b26); }
.tal.open .rk { color: var(--good); border-color: var(--good); }
.tal.partial { border-color: var(--good); }
.tal.maxed { border-color: #f5c451; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #2a3144), #1d2130); }
.tal.maxed .rk { color: #f5c451; border-color: #f5c451; }
.calc[data-mode=view] .tal { cursor: help; }
.calc[data-mode=view] .tal.open:not(.partial) { filter: grayscale(1) brightness(.62); border-color: #3a4459; }
.calc[data-mode=view] .tal.open:not(.partial) .rk { color: var(--muted); border-color: #3a4459; }
.calc.removing .tal { cursor: not-allowed; }
/* A talent that can't take a point flashes its border red instead of moving. */
.tal.nope { animation: nope .35s; }
@keyframes nope { 30% { border-color: var(--bad); } 100% { } }
.tal-tip { position: absolute; z-index: 100; max-width: 320px; background: #0d1018; border: 1px solid var(--line-2);
  border-radius: 8px; box-shadow: var(--shadow); padding: 10px 12px; font-size: .88rem; pointer-events: none; opacity: 0;
  transition: opacity .1s; left: 0; top: 0; }
.tal-tip.show { opacity: 1; }
.tip-title { font-weight: 800; font-size: 1rem; color: #fff; }
.tip-rank, .tip-cost { color: var(--muted); font-size: .82rem; }
.tip-need { color: var(--bad); font-size: .85rem; margin-top: 4px; }
.tip-desc { margin: 8px 0 0; color: #f3d98b; }
.tip-next-label { color: var(--muted); margin-top: 8px; font-size: .82rem; }
.tip-tag { color: var(--accent-2); font-size: .78rem; margin-top: 8px; }
.tip-help { color: var(--faint); font-size: .75rem; margin-top: 8px; }

@media (max-width: 900px) {
  .calc-tabs { display: flex; }
  .trees { grid-template-columns: 1fr; }
  .tree { display: none; }
  .tree.shown { display: block; }
  .grid { max-width: 360px; }
}
@media (max-width: 560px) {
  .calc-bar { grid-template-columns: 1fr; }
  .calc-stats { justify-content: center; }
  .calc-buttons .btn { flex: 1 1 auto; }
  .tal .rk { right: -6px; bottom: -7px; }
}

/* ---- Macros library (/macros) ---- */
.macros-lib { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .macros-lib { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .macros-lib { grid-template-columns: 1fr; } }
.macro-lib { display: flex; flex-direction: column; background: rgba(17, 21, 30, .92); }
.macro-lib .macro-body { flex: 1; }
.macro-notes { padding: 0 12px 10px; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.macro-notes p { margin: 0 0 6px; }
.macro-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line);
  font-size: .8rem; }
.macro-source { color: var(--faint); }
.macro-edit { margin-left: auto; font-weight: 700; }
.macro-group { margin: 0 0 28px; }
.macro-group h2 { font-size: 1.35rem; margin: 0 0 12px; }
.macro-group h2 .count { font-family: inherit; font-size: .85rem; color: var(--faint); -webkit-text-fill-color: var(--faint);
  margin-left: 6px; }
.macro-howto { color: var(--muted); font-size: .9rem; margin: -6px 0 22px; text-align: center; }
.macro-more { margin: 30px auto 0; max-width: 640px; text-align: center; color: var(--muted); background: rgba(17, 21, 30, .85);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.macro-form { max-width: 640px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.macro-form .macro-row { position: relative; padding: 0; }
.macro-form .macro-row textarea { min-height: 150px; padding-bottom: 22px; }
.field-row select { width: 100%; }

/* ---- News (/news): Blizzard blue posts, videos, site news ---- */
.news-wrap { max-width: 980px; }
.news-admin { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 14px; }
.news-admin form { margin: 0; }
.note.center { text-align: center; }
.news-tabs { justify-content: center; margin: 0 0 18px; }
.news-cards { display: grid; gap: 12px; }
.news-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; background: rgba(17, 21, 30, .92);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.news-card.has-thumb { grid-template-columns: 240px minmax(0, 1fr); }
.news-card { position: relative; transition: border-color .15s, transform .15s, box-shadow .15s; }
.news-card:hover { border-color: rgba(240, 192, 80, .55); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.news-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }  /* whole card is the link */
.nc-watch { color: #ff8a8a; font-weight: 700; }
.nc-thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.nc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.nc-thumb:hover img { transform: scale(1.04); }
.nc-play { position: absolute; inset: 0; margin: auto; width: 46px; height: 32px; border-radius: 8px; background: rgba(214, 32, 32, .92);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.nc-main { min-width: 0; }
.nc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--faint); font-size: .85rem; }
.news-card h2 { margin: 6px 0 8px; font-size: 1.2rem; overflow-wrap: anywhere; }
.news-card h2 a { color: var(--text); }
.news-card h2 a:hover { color: var(--accent-2); text-decoration: none; }
.nc-excerpt { color: var(--muted); font-size: .92rem; margin: 0; }
.nc-excerpt p { margin: 0; }
.nk { display: inline-block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 99px; line-height: 1.5; white-space: nowrap; vertical-align: 1px; }
.nk-blue { background: rgba(0, 174, 255, .16); color: #4fc3ff; border: 1px solid rgba(0, 174, 255, .45); }
.nk-video { background: rgba(214, 32, 32, .16); color: #ff6b6b; border: 1px solid rgba(214, 32, 32, .45); }
.nk-site { background: rgba(240, 144, 60, .14); color: var(--accent-2); border: 1px solid rgba(240, 144, 60, .4); }
.news-row .nk { margin-right: 6px; }
.tldr { position: relative; margin: 8px 0 0; padding: 12px 14px 10px 14px; border-radius: 8px;
  background: rgba(240, 192, 80, .07); border: 1px solid rgba(240, 192, 80, .35); }
.tldr-tag { display: inline-block; font-family: var(--font-head); font-weight: 800; font-size: .78rem; letter-spacing: .1em;
  color: #ffd27a; margin-bottom: 4px; }
.tldr ul { margin: 0; padding-left: 18px; color: var(--text); font-size: .92rem; line-height: 1.5; }
.tldr li + li { margin-top: 3px; }
.news-story { max-width: 860px; }
.news-story .tldr { margin: 14px 0 18px; }
.news-story .eyebrow .nk { margin-left: 6px; }
.blue-name { color: #4fc3ff; font-weight: 700; }
.blue-post { margin: 0; padding: 16px 18px; border-radius: 8px; background: rgba(0, 120, 200, .08);
  border: 1px solid rgba(0, 174, 255, .3); border-left: 4px solid #00aeff; overflow-wrap: anywhere; }
.bp-head { color: #9fdcff; font-size: .9rem; margin-bottom: 10px; }
.blue-post .prose { color: #d9efff; }
.blue-post .prose a { color: #4fc3ff; }
.blue-post img { max-width: 100%; height: auto; border-radius: 6px; }
.blue-post table { border-collapse: collapse; margin: 10px 0; }
.blue-post th, .blue-post td { border: 1px solid rgba(0, 174, 255, .25); padding: 4px 8px; }
.source-link { margin: 12px 0 0; font-weight: 700; }
.notes-head { margin-top: 22px; }
@media (max-width: 640px) {
  .news-card.has-thumb { grid-template-columns: minmax(0, 1fr); }
  .news-card { padding: 14px; }
}
.news-story h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.2; overflow-wrap: anywhere; }

/* ---- Content Creators (/creators) ---- */
.cv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .cv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cv-grid { grid-template-columns: minmax(0, 1fr); } }
.cv-card { position: relative; background: rgba(17, 21, 30, .92); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s; }
.cv-card:hover { border-color: rgba(240, 192, 80, .55); }
.cv-player { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000;
  cursor: pointer; overflow: hidden; }
.cv-player img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.cv-player:hover img { transform: scale(1.04); }
.cv-player:hover .nc-play { background: #ff2a2a; }
.cv-player.playing { cursor: default; }
.cv-player iframe { width: 100%; height: 100%; border: 0; display: block; }
.cv-info { padding: 10px 12px 12px; }
.cv-info h2 { margin: 0 0 4px; font-family: var(--font); font-size: .98rem; font-weight: 700; line-height: 1.3; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cv-meta { margin: 0; font-size: .82rem; color: var(--faint); }
.cv-meta a { color: var(--accent-2); font-weight: 700; }
.cv-hide { position: absolute; top: 6px; right: 6px; margin: 0; }
.cv-hide button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .7);
  color: #fff; cursor: pointer; font-size: 1rem; line-height: 1; }
.cv-hide button:hover { background: var(--bad); }
.center { text-align: center; }
.cm-add { max-width: 560px; }
.cm-list { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 8px; }
.cm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: rgba(17, 21, 30, .92);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.cm-row form { margin: 0; }
.cm-name { display: flex; gap: 6px; flex: 1 1 240px; }
.cm-name input { flex: 1; min-width: 0; }
.cm-count { color: var(--faint); font-size: .85rem; }
.cm-link { font-size: .85rem; }
.cm-status { color: var(--faint); font-size: .8rem; }
.cm-status.paused { color: #ffd27a; }

/* ---- Class guide (guides/<class>.md) under the spellbook ---- */
.class-guide { margin-top: 18px; }
.cg { padding: 4px 22px 24px; max-width: 900px; margin: 0 auto; }
/* The affiliate button under the TL;DR on Site news posts */
.news-cta { margin: 6px 0 26px; }
.news-cta.build-cta { max-width: none; margin: 36px 0 -8px; text-align: center; }  /* build pages: centred between votes and guide */
.cg-body.news-cta > p:has(> a.aff-cta) { margin: 0; padding: 0; background: none; border: 0; font-size: inherit; }  /* not the guides' "Quick answer" box */
/* Back-to-top button, bottom-right corner of the class guide box */
.class-guide { position: relative; }
.cg-top { position: absolute; right: 18px; bottom: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%; text-decoration: none; color: #1a0f05;
  background: linear-gradient(180deg, #ffd27a, #e0902f); box-shadow: 0 4px 14px rgba(0, 0, 0, .45), 0 0 0 2px rgba(255, 210, 122, .25);
  font: 800 .62rem/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; transition: transform .15s, filter .15s; }
.cg-top svg { width: 22px; height: 22px; fill: currentColor; margin-bottom: 1px; }
.cg-top:hover, .cg-top:focus-visible { transform: translateY(-3px); filter: brightness(1.08); }
.class-guide:not([open]) .cg-top { display: none; }
@media (max-width: 560px) { .cg-top { right: 12px; bottom: 12px; width: 46px; height: 46px; } }
.cg-title { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; margin: 8px 0 4px; }
.cg-meta { color: var(--faint); font-size: .85rem; margin: 0 0 16px; }
.cg-toc { background: rgba(240, 192, 80, .06); border: 1px solid rgba(240, 192, 80, .3); border-radius: 8px;
  padding: 12px 16px; margin: 0 0 20px; }
.cg-toc strong { font-family: var(--font-head); color: #ffd27a; letter-spacing: .04em; }
.cg-toc ol { margin: 8px 0 0; padding-left: 20px; columns: 2; column-gap: 28px; font-size: .9rem; }
.cg-toc li { break-inside: avoid; margin-bottom: 3px; }
@media (max-width: 640px) { .cg { padding: 4px 12px 18px; } .cg-toc ol { columns: 1; } }
.cg-body > p:first-child { font-size: 1.04rem; background: var(--bg-2); border-left: 3px solid var(--c, var(--accent));
  padding: 12px 14px; border-radius: 6px; }
.cg-body h3 { scroll-margin-top: 80px; margin-top: 28px; }
.cg-body h4 { margin-top: 18px; }
.cg-body li + li { margin-top: 4px; }
/* Class guide headings: the site's carved gold lettering (title = page-title gradient, sections = plain gold) */
.cg-title { font-family: var(--font-display); font-weight: 900; letter-spacing: .02em;
  background: linear-gradient(180deg, #fff6d8 0%, #ffd27a 38%, #e0902f 70%, #9c4f14 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(40, 18, 4, .9)) drop-shadow(0 6px 18px rgba(240, 144, 60, .3)); }
.cg-body h3 { font-family: var(--font-display); font-weight: 900; color: #ffd27a; letter-spacing: .02em;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.25; text-shadow: 0 2px 0 rgba(40, 18, 4, .9);
  margin: 34px 0 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(240, 192, 80, .3); }
.cg-body h4 { font-family: var(--font-head); font-weight: 800; color: #f3d98b; font-size: 1.08rem; margin: 22px 0 6px; }
.cg-body > p > strong:only-child { font-family: var(--font-head); color: #f3d98b; font-size: 1.02rem; }
.cg-body a[href^="/talents/"] { display: inline-block; font-family: var(--font-head); font-weight: 800; padding: 4px 12px;
  border-radius: 6px; border: 1px solid rgba(240, 144, 60, .6); background: rgba(240, 144, 60, .12); text-decoration: none; }
.cg-body a[href^="/talents/"]:hover { background: rgba(240, 144, 60, .25); }
/* Skill icons in front of talent and spell names */
.gi { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: help; }
.gi img { width: 20px; height: 20px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .6); box-shadow: 0 0 0 1px rgba(240, 192, 80, .35);
  vertical-align: -4px; flex: none; }
#spellbook, #guide { scroll-margin-top: 72px; }  /* jump links land below the sticky header */
/* The decorative heading font joins "oo" (Moonkin, Good) into one swirl; site.js wraps double O's in .plain-o */
.plain-o { font-family: var(--font-head); font-weight: 800; }
/* Affiliate call to action in class guides */
.cg-body p:has(> a.aff-cta) { text-align: center; margin: 22px 0; overflow-x: clip; overflow-clip-margin: 8px; }  /* the wobble mustn't make phones scroll sideways */
.cg-body a.aff-cta { position: relative; animation: aff-wobble 4s ease-in-out 1s infinite; }
/* Red arrow on the right, pointing left at the button, nudging towards it */
.cg-body a.aff-cta::after { content: ""; position: absolute; top: 50%; left: 100%; width: 84px; height: 46px; margin: -23px 0 0 14px;
  background: #e2261c; filter: drop-shadow(0 0 6px rgba(226, 38, 28, .55));
  clip-path: polygon(0 50%, 45% 0, 45% 30%, 100% 30%, 100% 70%, 45% 70%, 45% 100%);
  animation: aff-nudge 1.1s ease-in-out infinite; }
@keyframes aff-wobble {
  0%, 16%, 100% { transform: rotate(0) scale(1); }
  2% { transform: rotate(-4deg) scale(1.05); } 5% { transform: rotate(4deg) scale(1.05); }
  8% { transform: rotate(-3deg) scale(1.04); } 11% { transform: rotate(2deg) scale(1.02); } 14% { transform: rotate(-1deg); } }
@keyframes aff-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-8px); } }
/* Any later call to action in the same guide: a curved red arrow on the LEFT, sweeping down from above into the button */
.cg-body p:has(> a.aff-cta) ~ p:has(> a.aff-cta) { margin-top: 70px; }
.cg-body p:has(> a.aff-cta) ~ p:has(> a.aff-cta) a.aff-cta::after { display: none; }
.cg-body p:has(> a.aff-cta) ~ p:has(> a.aff-cta) a.aff-cta::before { content: ""; position: absolute; right: 100%; top: 50%;
  width: 130px; height: 78px; margin: -67px 6px 0 0; pointer-events: none;  /* the arrow tip is at the right edge, 86% down */
  background: url("../img/cta-arrow.png?v=3") no-repeat center / contain;
  filter: drop-shadow(0 0 6px rgba(255, 40, 30, .45)); animation: aff-nudge-in 1.1s ease-in-out infinite; }
/* The final call to action at the very end of a guide: a straight red arrow coming up from below */
/* order: button, then the grey affiliate note, then the arrow pointing up at them */
.cg-body p:has(> a.aff-cta) ~ p:has(> a.aff-cta):last-child { margin-top: 30px; padding: 0 0 96px; }
.cg-body p:has(> a.aff-cta) ~ p:has(> a.aff-cta):last-child a.aff-cta::after { display: none; }
.cg-body p:has(> a.aff-cta) ~ p:has(> a.aff-cta):last-child a.aff-cta::before { content: ""; display: block; position: absolute; right: auto; top: 100%; left: 50%;
  width: 60px; height: 80px; margin: 34px 0 0 -30px; pointer-events: none;  /* clears the affiliate note under the button */
  background: url("../img/cta-arrow-up.png?v=1") no-repeat center / contain;
  filter: drop-shadow(0 0 6px rgba(255, 40, 30, .45)); animation: aff-nudge-up 1.1s ease-in-out infinite; }
@keyframes aff-nudge-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes aff-nudge-in { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(7px, 3px); } }
@media (prefers-reduced-motion: reduce) { .cg-body a.aff-cta::before { animation: none; } }
@media (max-width: 560px) {
  .cg-body p:has(> a.aff-cta) ~ p:has(> a.aff-cta):last-child { padding: 0 0 116px; }  /* the note wraps to two lines on phones */
  .cg-body p:has(> a.aff-cta) ~ p:has(> a.aff-cta):last-child a.aff-cta::before { margin-top: 56px; }
  .cg-body p:has(> a.aff-cta) ~ p:has(> a.aff-cta) { padding: 0 0 0 70px; }
  .cg-body p:has(> a.aff-cta) ~ p:has(> a.aff-cta) a.aff-cta::before { width: 66px; height: 40px; margin: -34px 3px 0 0; }
  .cg-body p:has(> a.aff-cta) { padding-right: 56px; }
  .cg-body p:has(> a.aff-cta) a.aff-cta { font-size: .86rem; padding: 10px 12px; white-space: nowrap; letter-spacing: .01em; }
  .cg-body a.aff-cta::after { width: 48px; height: 30px; margin: -15px 0 0 6px; } }
@media (prefers-reduced-motion: reduce) { .cg-body a.aff-cta, .cg-body a.aff-cta::after { animation: none; } }
.cg-body a.aff-cta { display: inline-block; margin-top: 6px; padding: 10px 20px; border-radius: 8px; font-family: var(--font-head);
  font-weight: 800; font-size: 1.12rem; letter-spacing: .03em; color: #1a0f05; text-decoration: none;
  background: linear-gradient(180deg, #ffd27a, #e0902f); box-shadow: 0 4px 14px rgba(240, 144, 60, .35); }
.cg-body a.aff-cta:hover { filter: brightness(1.08); }
.cg-body a.aff-cta + br + em { display: block; margin-top: 6px; font-size: .78rem; color: var(--faint); }