/* Patch notes - Battlefield & Loot Update
   Scoped under .gw-patchnotes. Self-contained dark panel: it carries its own
   background, so it sits on a light or dark host page without inheriting either. */

.gw-patchnotes {
  --bg:        #14161d;
  --panel:     #1b1e27;
  --panel-2:   #21252f;
  --raised:    #2a2f3b;
  --line:      #333949;
  --text:      #dde1ea;
  --text-dim:  #98a1b5;
  --text-mute: #858ea1;
  --gold:      #d6a44e;
  --gold-dim:  #8a6b31;
  --crimson:   #c25a44;
  --steel:     #6f8fb0;

  --f-head: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --f-body: "Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.gw-patchnotes *,
.gw-patchnotes *::before,
.gw-patchnotes *::after { box-sizing: border-box; }
.gw-patchnotes img { max-width: 100%; height: auto; }
.gw-patchnotes p,
.gw-patchnotes h1, .gw-patchnotes h2,
.gw-patchnotes h3, .gw-patchnotes h4 { margin: 0; }

.gw-patchnotes .wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px 72px; }

/* ---------- header bar ---------- */
.gw-patchnotes .masthead {
  display: flex; flex-direction: column; gap: 10px;
  padding: 34px 0 22px; margin-bottom: 4px;
  border-bottom: 3px solid var(--gold);
}
.gw-patchnotes .eyebrow {
  align-self: flex-start;
  font-family: var(--f-head); font-weight: 600; font-size: 13px;
  letter-spacing: .09em; text-transform: uppercase;
  color: #16181f; background: var(--gold);
  padding: 3px 10px 2px;
}
.gw-patchnotes h1 {
  font-family: var(--f-head); font-weight: 700;
  font-size: clamp(34px, 6vw, 54px); line-height: 1;
  letter-spacing: .01em; text-transform: uppercase; color: #fff;
}
.gw-patchnotes .standfirst {
  font-size: 16px; color: var(--text-dim); max-width: 62ch;
}

.gw-patchnotes nav.toc { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 12px; }
.gw-patchnotes nav.toc a {
  font-family: var(--f-head); font-weight: 600; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
  background: var(--panel-2); padding: 6px 13px;
  border-bottom: 2px solid transparent;
}
.gw-patchnotes nav.toc a:hover,
.gw-patchnotes nav.toc a:focus-visible {
  color: var(--gold); background: var(--raised);
  border-bottom-color: var(--gold); outline: none;
}

/* ---------- sections ---------- */
.gw-patchnotes section { padding-top: 40px; }
.gw-patchnotes h2 {
  font-family: var(--f-head); font-weight: 700; font-size: 30px;
  line-height: 1.1; text-transform: uppercase; letter-spacing: .01em;
  color: #fff; padding-left: 12px; border-left: 5px solid var(--gold);
  margin-bottom: 8px;
}
.gw-patchnotes .sub { color: var(--text-mute); font-size: 14px; margin-bottom: 18px; max-width: 72ch; }
.gw-patchnotes h3 {
  font-family: var(--f-head); font-weight: 700; font-size: 21px;
  line-height: 1.15; text-transform: uppercase; color: #fff;
}

/* ---------- monster levels ---------- */
.gw-patchnotes .lv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 760px) { .gw-patchnotes .lv-grid { grid-template-columns: 1fr; } }
.gw-patchnotes .lv-card { background: var(--panel); padding: 0 0 6px; }
.gw-patchnotes .lv-card h3 {
  background: var(--panel-2); padding: 9px 14px;
  border-bottom: 2px solid var(--gold-dim);
}
.gw-patchnotes .lv-card > div { padding: 4px 14px 0; }
.gw-patchnotes .lv-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; padding: 6px 8px; margin: 0 -8px;
}
.gw-patchnotes .lv-row:nth-child(odd) { background: rgba(255,255,255,.022); }
.gw-patchnotes .lv-row span:first-child { font-size: 15px; }
.gw-patchnotes .lv-row span:last-child {
  font-family: var(--f-head); font-weight: 700; font-size: 17px;
  font-variant-numeric: tabular-nums; color: var(--gold);
}

/* ---------- zone loot ---------- */
.gw-patchnotes .zones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 820px) { .gw-patchnotes .zones { grid-template-columns: 1fr; } }
.gw-patchnotes .zone {
  background: var(--panel); padding: 16px 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  border-top: 3px solid var(--gold-dim);
}
.gw-patchnotes .zone-lv { font-size: 13px; color: var(--text-mute); margin-top: -8px; }
.gw-patchnotes .drops { display: grid; }
.gw-patchnotes .drop {
  display: grid; grid-template-columns: 1fr 78px 52px; align-items: center;
  gap: 12px; padding: 7px 8px; margin: 0 -8px; font-size: 14.5px;
}
.gw-patchnotes .drop:nth-child(odd) { background: rgba(255,255,255,.022); }
.gw-patchnotes .bar { height: 9px; background: #171a22; padding: 2px; }
.gw-patchnotes .bar span { display: block; height: 100%; background: var(--steel); }
.gw-patchnotes .pct {
  font-family: var(--f-head); font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--text-dim);
}
.gw-patchnotes .pct.rare { color: var(--gold); }
.gw-patchnotes .pct.always { color: #7fb069; }
.gw-patchnotes .drop.norate { grid-template-columns: 1fr 52px; }
@media (max-width: 560px) {
  .gw-patchnotes .drop,
  .gw-patchnotes .drop.norate { grid-template-columns: 1fr 52px; }
  .gw-patchnotes .bar { display: none; }
}

.gw-patchnotes .books { background: var(--panel-2); padding: 12px; display: grid; gap: 8px; }
.gw-patchnotes .books-label {
  font-family: var(--f-head); font-weight: 600; font-size: 13px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-mute);
}
.gw-patchnotes .class-row { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: start; }
.gw-patchnotes .class-name {
  font-family: var(--f-head); font-weight: 700; font-size: 14px;
  text-transform: uppercase; color: var(--gold); padding-top: 3px;
}
.gw-patchnotes .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.gw-patchnotes .chip {
  font-size: 13px; padding: 2px 8px; background: var(--raised);
  color: var(--text-dim); white-space: nowrap;
}
@media (max-width: 400px) { .gw-patchnotes .class-row { grid-template-columns: 1fr; gap: 3px; } }

/* ---------- list blocks ---------- */
.gw-patchnotes .block { background: var(--panel); padding: 14px 16px 16px; margin-top: 14px; }
.gw-patchnotes .block:first-of-type { margin-top: 0; }
.gw-patchnotes .block-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: -14px -16px 12px; padding: 9px 16px;
  background: var(--panel-2); border-bottom: 2px solid var(--gold-dim);
}
.gw-patchnotes .block-tag {
  font-family: var(--f-head); font-weight: 700; font-size: 16px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--gold);
}
.gw-patchnotes .block-note { font-size: 13px; color: var(--text-mute); }
.gw-patchnotes ul.plain { list-style: none; padding: 0; margin: 0; }
.gw-patchnotes ul.plain li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 7px 8px; margin: 0 -8px; font-size: 14.5px;
}
.gw-patchnotes ul.plain li:nth-child(odd) { background: rgba(255,255,255,.022); }
/* Group heading inside a label/value list - not a row, so no value cell
   and no zebra stripe. */
.gw-patchnotes ul.plain li.group {
  display: block; margin: 14px 0 2px; padding: 0 8px 4px;
  border-bottom: 1px solid var(--line); background: none;
  font-family: var(--f-head); font-weight: 700; font-size: 12.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim);
}
.gw-patchnotes ul.plain li.group:first-child { margin-top: 0; }
.gw-patchnotes ul.plain li b {
  font-family: var(--f-head); font-weight: 700; font-size: 16px;
  font-variant-numeric: tabular-nums; color: var(--gold); white-space: nowrap;
}
.gw-patchnotes ul.plain li em { font-style: normal; color: var(--text-mute); font-size: 13.5px; }

/* ---------- titles ---------- */
.gw-patchnotes .titles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 760px) { .gw-patchnotes .titles { grid-template-columns: 1fr; } }
.gw-patchnotes .title-card {
  background: var(--panel-2); padding: 13px 15px 15px;
  display: flex; flex-direction: column; gap: 7px;
  border-left: 4px solid var(--gold-dim);
}
.gw-patchnotes .title-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gw-patchnotes .badge {
  font-family: var(--f-head); font-weight: 700; font-size: 11px;
  letter-spacing: .07em; text-transform: uppercase; padding: 2px 7px 1px;
  color: #16181f;
}
.gw-patchnotes .badge.new { background: var(--gold); }
.gw-patchnotes .badge.fix { background: var(--crimson); color: #fff; }
.gw-patchnotes .title-how { font-size: 13.5px; color: var(--text-mute); }
.gw-patchnotes .stats { display: flex; flex-wrap: wrap; gap: 4px; }
.gw-patchnotes .stat {
  font-size: 13px; font-variant-numeric: tabular-nums;
  padding: 2px 8px; background: var(--raised); color: var(--text);
  white-space: nowrap; border-left: 2px solid var(--gold-dim);
}

/* ---------- callout ---------- */
.gw-patchnotes .callout {
  background: var(--panel-2); border-left: 4px solid var(--crimson);
  padding: 12px 15px; margin-top: 12px; display: grid; gap: 4px;
}
.gw-patchnotes .callout h4 {
  font-family: var(--f-head); font-weight: 700; font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--crimson);
}
.gw-patchnotes .callout p { font-size: 14px; color: var(--text-dim); }

.gw-patchnotes .split { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: start; }
.gw-patchnotes .split > .block { margin-top: 0; }   /* keep grid columns top-aligned */
@media (max-width: 700px) { .gw-patchnotes .split { grid-template-columns: 1fr; } }

.gw-patchnotes footer {
  margin-top: 40px; padding: 14px 16px; background: var(--panel);
  color: var(--text-mute); font-size: 13.5px; border-top: 2px solid var(--line);
}
.gw-patchnotes footer .credit { margin-top: 10px; color: var(--text-dim); }
.gw-patchnotes footer a { color: var(--gold); text-decoration: none; }
.gw-patchnotes footer a:hover,
.gw-patchnotes footer a:focus-visible { text-decoration: underline; }

.gw-patchnotes ::selection { background: var(--gold); color: #16181f; }
@media (prefers-reduced-motion: reduce) {
  .gw-patchnotes * { animation: none !important; transition: none !important; }
}

/* ---------- constellation backdrop ----------
   A node network drawn on a canvas behind the panel, echoing the zodiac this
   update is about. It sits under the content and never takes pointer events,
   so it cannot interfere with selecting or clicking anything. The script drops
   it entirely under prefers-reduced-motion. */
.gw-patchnotes { position: relative; isolation: isolate; }
.gw-patchnotes .constellation {
  /* Absolute, not fixed, so it stays clipped to this component when the page is
     dropped into a host site - and only ONE viewport tall, repositioned as you
     scroll. A canvas spanning the whole document would be ~9800px here, which at
     dpr 2 is 19596px and past the 16384px canvas limit: it would fail to
     allocate and draw nothing at all on a HiDPI screen. */
  position: absolute; left: 0; top: 0; width: 100%;
  z-index: 0; pointer-events: none; display: block;
}
.gw-patchnotes .wrap { position: relative; z-index: 1; }

/* ---------- headline strip ---------- */
.gw-patchnotes .headline {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  margin: 22px 0 6px;
}
.gw-patchnotes .headline div {
  background: var(--panel); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.gw-patchnotes .headline b {
  font-family: var(--f-head); font-weight: 700; font-size: 26px;
  line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums;
}
.gw-patchnotes .headline span {
  font-family: var(--f-head); font-weight: 600; font-size: 12px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute);
}

/* ---------- sticky table of contents ----------
   The page runs to thirteen sections, so the nav follows you down it and marks
   where you are. top uses the safe-area inset rather than 0 so it clears a
   phone's status bar. */
.gw-patchnotes nav.toc {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 2;
  background: var(--bg); padding-top: 12px; padding-bottom: 8px;
  box-shadow: 0 10px 18px -12px rgba(0,0,0,.9);
  /* Wraps rather than scrolls: a scroll container here draws a full-width
     scrollbar under the nav on Windows, which reads as a broken element. */
  flex-wrap: wrap; overflow: visible;
}
.gw-patchnotes nav.toc a { flex: 0 0 auto; }
.gw-patchnotes nav.toc a[aria-current="true"] {
  color: #16181f; background: var(--gold); border-bottom-color: var(--gold);
}

@media (max-width: 720px) {
  .gw-patchnotes .headline { grid-template-columns: repeat(2, 1fr); }
  /* On a phone thirteen chips would wrap to four rows and swallow the screen,
     so there it does scroll - with the bar hidden in every engine, since the
     chips themselves already run to the edge and signal there is more. */
  .gw-patchnotes nav.toc {
    flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .gw-patchnotes nav.toc::-webkit-scrollbar { width: 0; height: 0; display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gw-patchnotes .constellation { display: none; }
}

/* ---------- quest table ----------
   Five genuinely separate facts per step - target, how many, experience, talent,
   reward - so they get five aligned columns rather than one run-on line. Numbers
   are tabular and right-aligned so the eye can compare down a column. */
.gw-patchnotes .qtable-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gw-patchnotes table.qtable {
  width: 100%; min-width: 660px; border-collapse: collapse; font-size: 14.5px;
}
.gw-patchnotes table.qtable th {
  font-family: var(--f-head); font-weight: 600; font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute);
  text-align: left; padding: 0 10px 7px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.gw-patchnotes table.qtable td {
  padding: 8px 10px; vertical-align: baseline;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.gw-patchnotes table.qtable tbody tr:nth-child(odd) { background: rgba(255,255,255,.022); }
.gw-patchnotes table.qtable tbody tr:last-child td { border-bottom: none; }

.gw-patchnotes table.qtable .t-target { color: var(--text); white-space: nowrap; }
.gw-patchnotes table.qtable .t-num {
  text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--f-head); font-weight: 700; white-space: nowrap;
}
.gw-patchnotes table.qtable .t-kills { color: var(--text-dim); font-size: 15px; }
.gw-patchnotes table.qtable .t-xp { color: var(--gold); font-size: 16px; }
.gw-patchnotes table.qtable .t-tp { color: var(--steel); font-size: 15px; }
.gw-patchnotes table.qtable .t-reward { color: var(--text-dim); }

/* The boss step is the payoff, so it reads as one - not another zebra row. */
.gw-patchnotes table.qtable tr.boss td {
  background: var(--panel-2); border-top: 1px solid var(--gold-dim);
}
.gw-patchnotes table.qtable tr.boss .t-target {
  color: #fff; font-family: var(--f-head); font-weight: 700; font-size: 16px;
}
.gw-patchnotes table.qtable tr.boss .t-kills::after {
  content: "boss"; font-family: var(--f-head); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dim);
}
.gw-patchnotes table.qtable tr.boss .t-kills { font-size: 0; }