:root {
  --primary: #efca72;
  --primary-hi: #ffe4a2;
  --primary-low: #c58b2f;
  --secondary: #242424;
  --secondary-dark: #191919;
  --panel: rgba(24, 24, 24, .94);
  --panel-2: rgba(31, 31, 31, .94);
  --line: #525252;
  --line-soft: #3c3c3c;
  --text: #f3f3f3;
  --text-alt: #c6c6c6;
  --muted: #929292;
  --danger: #ff9c89;
  --ok: #a9e7bb;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #111; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: #141414;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: 64px;
  background: var(--secondary);
  box-shadow: 0 1px 0 #525252, 0 5px 16px rgba(0,0,0,.24);
}
.topbar__inner {
  height: 64px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 22px;
}
.topbar__brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  justify-self: start;
}
.topbar__crest { width: 43px; height: 43px; flex: 0 0 auto; }
.topbar__brandtext { display: flex; flex-direction: column; line-height: 1; }
.topbar__brandtext strong {
  color: #eee;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  letter-spacing: .085em;
}
.topbar__brandtext span {
  margin-top: 3px;
  color: var(--primary);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;
}
.topbar__nav { display: flex; align-items: center; gap: 2px; }
.nav-item {
  height: 48px;
  padding: 0 12px;
  border: 0;
  color: #cfcfcf;
  background: transparent;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .025em;
  cursor: default;
  transition: color .15s ease;
}
.nav-item:hover { color: var(--primary); }
a.nav-item {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.topbar__actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 12px;
}
.server-status {
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #555;
  border-radius: 6px;
  color: #ddd;
  background: #2b2b2b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  white-space: nowrap;
}
.server-status__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8a8a8a;
  transition: background .2s ease, box-shadow .2s ease;
}
.server-status--online {
  border-color: rgba(110,207,138,.45);
  color: var(--ok);
}
.server-status--online .server-status__dot {
  background: #6ecf8a;
  box-shadow: 0 0 6px rgba(110,207,138,.7);
}
.server-status--offline {
  border-color: rgba(255,125,100,.45);
  color: var(--danger);
}
.server-status--offline .server-status__dot {
  background: #ff7d64;
  box-shadow: 0 0 6px rgba(255,125,100,.6);
}
.realm-chip {
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #555;
  border-radius: 6px;
  color: #ddd;
  background: #2b2b2b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
}
.signup-nav {
  padding: 8px 14px 7px;
  border: 2px solid transparent;
  border-radius: 2px;
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  color: #151515;
  background: var(--primary);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: .02em;
  transition: background .15s ease, color .15s ease;
}
.signup-nav:hover { color: var(--primary); background: var(--secondary); }

.local-preview {
  position: fixed;
  top: 76px;
  right: 14px;
  z-index: 35;
  padding: 7px 10px;
  border: 1px solid rgba(239,202,114,.55);
  border-radius: 2px;
  color: var(--primary);
  background: rgba(20,20,20,.88);
  box-shadow: 0 3px 12px rgba(0,0,0,.35);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}

.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  padding-top: 64px;
  overflow: hidden;
  background: #111;
}
.hero-media {
  position: fixed;
  inset: 64px 0 0;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
  background: #131313;
}
.hero-video, .hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-video { z-index: 2; }
.hero-fallback {
  z-index: 1;
  background:
    linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.4)),
    url("/assets/hero-bg.svg") center/cover no-repeat;
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(circle at 50% 38%, transparent 0 26%, rgba(0,0,0,.05) 55%, rgba(0,0,0,.3) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.05) 0, rgba(0,0,0,.02) 55%, rgba(0,0,0,.42) 100%);
}

.hero-grid {
  min-height: calc(100vh - 64px);
  width: 100%;
  padding: 56px 44px 74px;
  display: grid;
  grid-template-columns: minmax(70px, 1fr) minmax(430px, 1.25fr) minmax(390px, 1fr);
  gap: 34px;
  align-items: center;
}
.hero-spacer { min-width: 0; }

.hero-brand {
  min-width: 0;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  filter: drop-shadow(0 4px 11px rgba(0,0,0,.65));
}
.hero-brand__crest {
  width: 88px;
  height: 88px;
  margin-bottom: 12px;
}
.hero-brand__eyebrow {
  margin-bottom: 7px;
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .28em;
  text-shadow: 0 2px 7px #000;
}
.hero-brand h1 {
  margin: 0;
  color: #f3eee4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(40px, 4.1vw, 76px);
  font-size: clamp(34px, 10.6cqi, 84px);
  font-weight: 700;
  line-height: .84;
  letter-spacing: .035em;
  text-shadow: 0 4px 8px #000, 0 0 24px rgba(0,0,0,.35);
}
.hero-brand h1 span {
  display: inline-block;
  margin: 0 .1em;
  color: var(--primary);
  font-size: .48em;
  vertical-align: .23em;
}
.hero-brand p {
  max-width: 590px;
  margin: 20px 0 19px;
  color: #eee;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  text-shadow: 0 2px 8px #000;
}
.hero-cta {
  min-width: 210px;
  min-height: 48px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(239,202,114,.78);
  border-radius: 4px;
  color: #151515;
  background: var(--primary);
  box-shadow: 0 7px 18px rgba(0,0,0,.36);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: .025em;
  transition: background .15s ease, transform .15s ease;
}
.hero-cta:hover { background: var(--primary-hi); transform: translateY(-1px); }

.register-panel {
  position: relative;
  width: min(430px, 100%);
  justify-self: end;
  padding: 25px 28px 24px;
  border: 1px solid rgba(96,96,96,.72);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(35,35,35,.96), rgba(24,24,24,.97));
  box-shadow: 0 18px 52px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(8px);
}
.register-panel__topline {
  position: absolute;
  inset: -1px -1px auto;
  height: 3px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, #7f581b, var(--primary-hi), #7f581b);
}
.register-panel__header { margin-bottom: 18px; }
.register-panel__kicker {
  display: block;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
}
.register-panel h2 {
  margin: 4px 0 5px;
  color: #f4f4f4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  line-height: 1;
  letter-spacing: .025em;
}
.register-panel__header p {
  margin: 0;
  color: #9f9f9f;
  font-size: 13px;
  line-height: 1.5;
}
.register-panel__header strong { color: #cfcfcf; font-weight: 700; }

form { display: grid; gap: 10px; }
.field { display: block; }
.field > span {
  display: block;
  margin-bottom: 5px;
  color: #cfcfcf;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .055em;
}
.field input {
  width: 100%;
  height: 43px;
  padding: 0 11px;
  border: 1px solid #555;
  border-radius: 4px;
  outline: none;
  color: #f1f1f1;
  background: #2a2a2a;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
  font-size: 14px;
  transition: border .15s ease, box-shadow .15s ease;
}
.field input::placeholder { color: #838383; }
.field input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(239,202,114,.13), inset 0 1px 2px rgba(0,0,0,.35);
}
.field small {
  display: block;
  margin-top: 4px;
  color: #7e7e7e;
  font-size: 11px;
}
.check-row {
  margin-top: 1px;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 7px;
  align-items: start;
  color: #a8a8a8;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}
.check-row input { width: 14px; height: 14px; margin: 1px 0 0; accent-color: var(--primary-low); }
.turnstile-host { margin-top: 3px; }
.form-message {
  min-height: 0;
  color: var(--ok);
  font-size: 12px;
  line-height: 1.4;
}
.form-message:not(:empty) {
  padding: 8px 9px;
  border: 1px solid rgba(110,207,138,.32);
  border-radius: 3px;
  background: rgba(80,170,106,.09);
}
.form-message.error:not(:empty) {
  color: var(--danger);
  border-color: rgba(255,125,100,.35);
  background: rgba(255,80,55,.08);
}
.primary-button {
  height: 46px;
  margin-top: 2px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #151515;
  background: var(--primary);
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 3px 10px rgba(0,0,0,.25);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .035em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .08s ease;
}
.primary-button:hover { color: var(--primary); background: #242424; border-color: var(--primary); }
.primary-button:active { transform: translateY(1px); }
.primary-button:disabled { opacity: .6; cursor: wait; }

.realm-info {
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid #3a3a3a;
}
.realm-info > div:first-child { display: flex; flex-direction: column; }
.realm-info span {
  color: #777;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}
.realm-info strong {
  margin-top: 3px;
  color: #d5d5d5;
  font-size: 14px;
  font-weight: 700;
}
.realmlist-row {
  margin-top: 9px;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}
.realmlist-row code {
  min-width: 0;
  padding: 8px 8px;
  overflow: hidden;
  border: 1px solid #3c3c3c;
  border-radius: 3px;
  color: #999;
  background: #171717;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.realmlist-row button {
  height: 31px;
  padding: 0 10px;
  border: 1px solid var(--primary-low);
  border-radius: 2px;
  color: var(--primary);
  background: #202020;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.hero-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: rgba(245,245,245,.78);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
  text-shadow: 0 2px 7px #000;
}
.hero-footer__dot { color: var(--primary); font-size: 8px; }

@media (max-width: 1220px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(370px, 430px); padding-left: 28px; padding-right: 28px; }
  .hero-spacer { display: none; }
  .hero-brand h1 { font-size: clamp(40px, 5vw, 64px); font-size: clamp(34px, 10.6cqi, 72px); }
}

@media (max-width: 900px) {
  .topbar__inner { grid-template-columns: 1fr auto; padding: 0 12px; }
  .topbar__nav, .realm-chip, .server-status { display: none; }
  .topbar__brandtext span { display: none; }
  .signup-nav { font-size: 12px; padding: 7px 10px 6px; }
  .local-preview { top: 72px; right: 8px; }
  .hero-media { inset-top: 64px; }
  .hero-grid {
    min-height: calc(100vh - 64px);
    padding: 54px 18px 76px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 26px;
  }
  .hero-brand { width: 100%; }
  .hero-brand__crest { width: 68px; height: 68px; }
  .hero-brand h1 { font-size: clamp(34px, 9vw, 63px); font-size: clamp(30px, 10.6cqi, 63px); }
  .hero-brand p { max-width: 520px; font-size: 13px; }
  .hero-cta { display: none; }
  .register-panel { justify-self: auto; width: min(430px, 100%); }
}

@media (max-width: 520px) {
  .topbar__crest { width: 38px; height: 38px; }
  .topbar__brandtext strong { font-size: 13px; }
  .signup-nav { outline-width: 1px; outline-offset: 1px; }
  .hero-grid { padding-top: 46px; }
  .hero-brand__eyebrow { font-size: 9px; }
  .hero-brand h1 { font-size: clamp(30px, 10vw, 48px); font-size: clamp(28px, 10.6cqi, 48px); }
  .register-panel { padding: 23px 20px 21px; }
  .register-panel h2 { font-size: 26px; }
  .hero-footer { bottom: 13px; font-size: 7px; gap: 8px; }
}

/* Production registration security */
.bot-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.human-check {
  display: grid;
  gap: 5px;
  margin-top: 2px;
}
.human-check__label {
  color: #cfcfcf;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .055em;
}
.human-check small {
  color: #747474;
  font-size: 11px;
}
.about-section {
  position: relative;
  z-index: 2;
  padding: 70px 24px 90px;
  display: flex;
  justify-content: center;
  background: #141414;
  border-top: 1px solid rgba(255,255,255,.06);
}
.about-card {
  width: 100%;
  max-width: 640px;
  padding: 30px 32px;
  border: 1px solid rgba(96,96,96,.5);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(35,35,35,.9), rgba(24,24,24,.94));
  box-shadow: 0 18px 52px rgba(0,0,0,.4);
}
.about-card h2 {
  margin: 4px 0 16px;
  color: #f4f4f4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  letter-spacing: .02em;
}
.about-card p {
  margin: 0 0 14px;
  color: #c6c6c6;
  font-size: 14px;
  line-height: 1.55;
}
.about-card p:last-of-type { margin-bottom: 0; }
.about-card strong { color: #eee; }
.about-card__links {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.about-card__link {
  padding: 10px 18px;
  border: 1px solid rgba(239,202,114,.55);
  border-radius: 4px;
  color: var(--primary);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.about-card__link:hover { background: var(--primary); color: #151515; }
.turnstile-host {
  width: 100%;
  min-height: 65px;
  overflow: hidden;
}

/* Account panel (account.html) */
[hidden] { display: none !important; }
a.topbar__brand { color: inherit; text-decoration: none; }
.nav-item--active { color: var(--primary); box-shadow: inset 0 -2px var(--primary); }
.panel-links {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  font-size: 12px;
}
.panel-links a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}
.panel-links a:hover { color: var(--primary-hi); text-decoration: underline; }
.account-loading {
  margin: 30px 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.account-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.account-header > div { min-width: 0; }
.account-header h2 { font-size: 26px; overflow-wrap: anywhere; }
.secondary-button {
  height: 34px;
  padding: 0 12px;
  flex: 0 0 auto;
  border: 1px solid var(--primary-low);
  border-radius: 3px;
  color: var(--primary);
  background: #202020;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.secondary-button:hover { color: #151515; background: var(--primary); }
.secondary-button:disabled { opacity: .6; cursor: wait; }
.account-alert {
  margin-bottom: 14px;
  padding: 9px 10px;
  border: 1px solid rgba(255,125,100,.4);
  border-radius: 3px;
  color: var(--danger);
  background: rgba(255,80,55,.09);
  font-size: 12px;
  line-height: 1.45;
}
.account-tabs {
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line-soft);
}
.account-tab {
  height: 38px;
  padding: 0 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.account-tab:hover { color: var(--text-alt); }
.account-tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.account-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.account-facts {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 9px 16px;
  font-size: 13px;
}
.account-facts dt {
  padding-top: 2px;
  color: #777;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}
.account-facts dd {
  margin: 0;
  color: #d5d5d5;
  overflow-wrap: anywhere;
}
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.status-pill--ok { color: var(--ok); border-color: rgba(110,207,138,.45); background: rgba(80,170,106,.09); }
.status-pill--bad { color: var(--danger); border-color: rgba(255,125,100,.45); background: rgba(255,80,55,.08); }
.form-note {
  margin: 0;
  color: #8f8f8f;
  font-size: 12px;
  line-height: 1.5;
}
.form-note strong { color: #d5d5d5; overflow-wrap: anywhere; }

/* User control panel (account.html, signed in) */
.status-pill--off { color: #a8a8a8; border-color: #555; background: rgba(255,255,255,.03); }
.status-pill--warn { color: var(--primary); border-color: rgba(239,202,114,.45); background: rgba(239,202,114,.08); }

.ucp {
  min-height: 100vh;
  padding-top: 64px;
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(239,202,114,.055), transparent 70%),
    #141414;
}
.ucp-sidebar {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  padding: 26px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  border-right: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #1d1d1d, #181818);
}
.ucp-user {
  padding: 0 6px 20px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid var(--line-soft);
}
.ucp-user__crest { width: 44px; height: 44px; flex: 0 0 auto; }
.ucp-user__text { min-width: 0; display: flex; flex-direction: column; }
.ucp-user__text span, .ucp-realm span {
  color: #777;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
}
.ucp-user__text strong {
  margin-top: 3px;
  overflow: hidden;
  color: #f1f1f1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  letter-spacing: .03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ucp-nav { display: grid; gap: 3px; }
.ucp-nav__item {
  height: 44px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 2px solid transparent;
  border-radius: 0 3px 3px 0;
  color: #bdbdbd;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .07em;
  text-decoration: none;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.ucp-nav__item svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ucp-nav__item:hover { color: #f1f1f1; background: rgba(255,255,255,.04); }
.ucp-nav__item[aria-current="page"] {
  color: var(--primary);
  border-left-color: var(--primary);
  background: linear-gradient(90deg, rgba(239,202,114,.12), rgba(239,202,114,.02));
}
.ucp-nav__item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ucp-sidebar__footer {
  margin-top: auto;
  padding: 18px 6px 0;
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line-soft);
}
.ucp-realm { display: flex; flex-direction: column; }
.ucp-realm strong { margin-top: 3px; color: #cfcfcf; font-size: 13px; font-weight: 700; line-height: 1.35; }
.ucp-logout { width: 100%; }

.ucp-main {
  width: 100%;
  max-width: 1180px;
  padding: 34px 40px 60px;
}
.ucp-section { display: grid; gap: 20px; }
.ucp-head h1 {
  margin: 5px 0 6px;
  color: #f4f4f4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.ucp-head h1 span { color: var(--primary); }
.ucp-head p { margin: 0; color: #9f9f9f; font-size: 14px; line-height: 1.5; }
.ucp-head strong { color: #d5d5d5; }

.ucp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.stat-card {
  padding: 15px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 1px solid rgba(96,96,96,.55);
  border-radius: 4px;
  color: inherit;
  background: linear-gradient(180deg, rgba(35,35,35,.9), rgba(26,26,26,.94));
  text-decoration: none;
}
.stat-card > span { color: #808080; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.stat-card > strong { color: #f1f1f1; font-family: Georgia, "Times New Roman", serif; font-size: 24px; line-height: 1; }
.stat-card > strong .status-pill { font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 12px; }
.stat-card--link { transition: border-color .15s ease, transform .15s ease; }
.stat-card--link:hover { border-color: rgba(239,202,114,.6); transform: translateY(-1px); }
.stat-card--link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.ucp-grid { display: grid; gap: 20px; align-items: start; }
.ucp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ucp-card {
  min-width: 0;
  padding: 22px 24px;
  display: grid;
  gap: 14px;
  align-content: start;
  border: 1px solid rgba(96,96,96,.5);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(35,35,35,.9), rgba(24,24,24,.94));
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
.ucp-card h2 {
  margin: 0;
  color: #f1f1f1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  letter-spacing: .02em;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-link { color: var(--primary); font-size: 12px; font-weight: 800; text-decoration: none; }
.card-link:hover { color: var(--primary-hi); text-decoration: underline; }
.card-form { gap: 11px; }
.realm-info--card { margin-top: 0; padding-top: 0; border-top: 0; display: grid; gap: 10px; }
.realm-info--card .realmlist-row { margin-top: 0; }

.activity-list { margin: 0; padding: 0; list-style: none; display: grid; }
.activity-list li {
  padding: 10px 0;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  border-top: 1px solid #2e2e2e;
}
.activity-list li:first-child { border-top: 0; padding-top: 0; }
.activity-list li > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.activity-list strong { color: #dcdcdc; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.activity-list small { color: #858585; font-size: 12px; }
.activity-list__empty { color: #858585; font-size: 13px; }
.event-dot {
  width: 8px;
  height: 8px;
  margin: 5px 9px 0 0;
  flex: 0 0 auto;
  display: inline-block;
  border-radius: 50%;
  background: #777;
}
.activity-list .event-dot { margin-right: 0; }
.event-dot--ok { background: #6ecf8a; }
.event-dot--warn { background: var(--primary); }
.event-dot--bad { background: #ff7d64; }

.table-wrap { overflow-x: auto; }
.activity-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.activity-table th {
  padding: 0 12px 9px 0;
  color: #777;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
.activity-table td {
  padding: 10px 12px 10px 0;
  color: #d5d5d5;
  border-bottom: 1px solid #2a2a2a;
  vertical-align: top;
}
.activity-table__when, .activity-table__ip { color: #9a9a9a !important; white-space: nowrap; }
.activity-table__ip { font-family: Consolas, "Courier New", monospace; font-size: 12px; }
.activity-table__empty { color: #858585 !important; }

.character-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.character-grid > .ucp-empty { grid-column: 1 / -1; }
.ucp-empty p { margin: 0; color: #9f9f9f; font-size: 14px; }
.character-card {
  --class-color: var(--primary);
  min-width: 0;
  padding: 18px 20px;
  display: grid;
  gap: 14px;
  align-content: start;
  border: 1px solid rgba(96,96,96,.5);
  border-top: 3px solid var(--class-color);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(35,35,35,.92), rgba(24,24,24,.95));
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
.character-card__head { display: flex; align-items: center; gap: 13px; }
.character-card__emblem {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--class-color);
  border-radius: 50%;
  color: var(--class-color);
  background: rgba(0,0,0,.35);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 700;
}
.character-card__title { min-width: 0; flex: 1 1 auto; }
.character-card__title h3 {
  margin: 0;
  overflow: hidden;
  color: var(--class-color);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.character-card__title p { margin: 3px 0 0; color: #a9a9a9; font-size: 12px; }
.character-card__facts {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 14px;
  font-size: 13px;
}
.character-card__facts dt { padding-top: 2px; color: #777; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.character-card__facts dd { margin: 0; color: #d5d5d5; overflow-wrap: anywhere; }
.money { display: inline-flex; gap: 6px; }
.money__gold { color: #f2c94c; }
.money__silver { color: #c9c9c9; }
.money__copper { color: #d38b52; }
.character-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 3px 8px;
  border: 1px solid rgba(239,202,114,.4);
  border-radius: 10px;
  color: var(--primary);
  background: rgba(239,202,114,.06);
  font-size: 11px;
  font-weight: 700;
}
.chip--ok { color: var(--ok); border-color: rgba(110,207,138,.45); background: rgba(80,170,106,.09); }
.character-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.character-card__actions button:disabled { cursor: not-allowed; }
.character-card__note { flex-basis: 100%; color: #858585; font-size: 11px; line-height: 1.4; }
.character-card__confirm { display: grid; gap: 9px; }
.character-card__confirm p { margin: 0; color: #dcdcdc; font-size: 13px; }
.character-card__confirm .primary-button { height: 34px; margin: 0; padding: 0 14px; font-size: 13px; }
.character-card__confirm .secondary-button { height: 34px; }

.service-list {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 9px 18px;
  font-size: 13px;
  line-height: 1.5;
}
.service-list dt { padding-top: 2px; color: var(--primary); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.service-list dd { margin: 0; color: #bdbdbd; }

.twofactor-setup { display: grid; gap: 14px; }
.setup-steps { margin: 0; padding-left: 20px; color: #bdbdbd; font-size: 13px; line-height: 1.55; }
.qr-row { display: flex; align-items: flex-start; gap: 18px; }
.qr-code {
  width: 168px;
  height: 168px;
  flex: 0 0 auto;
  padding: 4px;
  border-radius: 4px;
  background: #fff;
}
.qr-row__key { min-width: 0; display: grid; gap: 6px; justify-items: start; }
.qr-row__key > span { color: #777; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.qr-row__key code {
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid #3c3c3c;
  border-radius: 3px;
  color: #eaeaea;
  background: #171717;
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  letter-spacing: .06em;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.qr-row__key small { color: #858585; font-size: 11px; }
.link-button {
  padding: 0;
  border: 0;
  color: var(--primary);
  background: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  cursor: pointer;
}
.link-button:hover { color: var(--primary-hi); text-decoration: underline; }
.field input.code-input {
  font-family: Consolas, "Courier New", monospace;
  font-size: 20px;
  letter-spacing: .25em;
}
.button-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.button-row .primary-button { margin-top: 0; padding: 0 22px; }
.button-row .secondary-button { height: 46px; }
.danger-button {
  height: 46px;
  margin-top: 2px;
  border: 1px solid rgba(255,125,100,.55);
  border-radius: 3px;
  color: var(--danger);
  background: rgba(255,80,55,.07);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.danger-button:hover { color: #151515; background: var(--danger); }
.danger-button:disabled { opacity: .6; cursor: wait; }
.ip-lock-warning { color: #b99a5a; }
.ucp-wide-button { width: 100%; height: 42px; }

@media (max-width: 1100px) {
  .ucp-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .ucp { display: block; }
  .ucp-sidebar {
    z-index: 20;
    height: auto;
    padding: 10px 16px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .ucp-user, .ucp-realm { display: none; }
  .ucp-nav {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ucp-nav::-webkit-scrollbar { display: none; }
  .ucp-nav__item {
    height: 38px;
    padding: 0 10px;
    flex: 0 0 auto;
    gap: 7px;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: 3px 3px 0 0;
    font-size: 12px;
  }
  .ucp-nav__item[aria-current="page"] { border-bottom-color: var(--primary); }
  .ucp-nav__item svg { width: 16px; height: 16px; }
  .ucp-sidebar__footer { margin: 0; padding: 0; flex: 0 0 auto; border-top: 0; }
  .ucp-logout { width: auto; }
  .ucp-main { padding: 24px 16px 48px; }
  .ucp-head h1 { font-size: 28px; }
  .ucp-card { padding: 18px 16px; }
  .character-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .ucp-nav__item span { display: none; }
  .ucp-nav__item[aria-current="page"] span { display: inline; }
  .ucp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qr-row { flex-direction: column; }
  .activity-table th:nth-child(3), .activity-table td:nth-child(3) { display: none; }
}

/* V2.0: character page, who is online, recovery codes, bug reports, news and GM tools */
.field select, .field textarea, .filter-input {
  width: 100%;
  border: 1px solid #555;
  border-radius: 4px;
  outline: none;
  color: #f1f1f1;
  background: #2a2a2a;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
  font: inherit;
  font-size: 14px;
  transition: border .15s ease, box-shadow .15s ease;
}
.field select { height: 43px; padding: 0 8px; }
.field textarea { min-height: 90px; padding: 10px 11px; line-height: 1.5; resize: vertical; }
.field textarea::placeholder, .filter-input::placeholder { color: #838383; }
.field select:focus, .field textarea:focus, .filter-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(239,202,114,.13), inset 0 1px 2px rgba(0,0,0,.35);
}
.filter-input { height: 34px; padding: 0 10px; font-size: 13px; }
select.filter-input { width: auto; padding: 0 6px; }
a.secondary-button { display: inline-flex; align-items: center; text-decoration: none; }
.link-button--left { justify-self: start; }
.chip--bad { color: var(--danger); border-color: rgba(255,125,100,.45); background: rgba(255,80,55,.08); }

.account-notice {
  margin-bottom: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(239,202,114,.45);
  border-radius: 3px;
  color: var(--primary-hi);
  background: rgba(239,202,114,.08);
  font-size: 13px;
  line-height: 1.45;
}
.account-notice p { margin: 0; }
.account-notice .link-button { flex: 0 0 auto; }

.card-head--wrap { flex-wrap: wrap; }
.card-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card-tools .filter-input[type="search"] { width: 260px; max-width: 100%; }
.ucp-card h3 {
  margin: 4px 0 0;
  color: #e4e4e4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  letter-spacing: .02em;
}

/* Character page */
.back-link { justify-self: start; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-decoration: none; }
.back-link:hover { color: var(--primary-hi); text-decoration: underline; }
.character-head { --class-color: var(--primary); display: flex; align-items: center; gap: 16px; }
.character-head > div:last-child { min-width: 0; }
.character-head .character-card__emblem { width: 58px; height: 58px; font-size: 26px; }
.character-head h1 { color: var(--class-color); }
.character-head p .status-pill { margin-left: 4px; vertical-align: 1px; }

.gear-list, .skill-list, .rep-list, .report-list, .gm-results, .gm-characters { margin: 0; padding: 0; list-style: none; }
.gear-list { display: grid; }
.gear-list li {
  padding: 6px 0;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  border-top: 1px solid #2a2a2a;
  font-size: 13px;
}
.gear-list li:first-child { border-top: 0; }
.gear-list__slot { color: #777; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.gear-list__name { color: #e0e0e0; font-weight: 700; overflow-wrap: anywhere; }
.gear-list__level { color: #8a8a8a; font-size: 11px; }
.gear-list__empty .gear-list__name { color: #555; font-weight: 400; }

.skill-list, .rep-list { display: grid; gap: 12px; }
.rep-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 24px; }
.meter-row__top { margin-bottom: 5px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; }
.meter-row__top > span { min-width: 0; color: #dcdcdc; font-weight: 700; overflow-wrap: anywhere; }
.meter-row__top small { flex: 0 0 auto; color: #8a8a8a; font-size: 11px; }
.meter-row__top .chip { padding: 1px 6px; font-size: 10px; }
.progress { height: 6px; display: block; overflow: hidden; border-radius: 3px; background: #2c2c2c; }
.progress__fill { height: 100%; display: block; border-radius: 3px; background: linear-gradient(90deg, var(--primary-low), var(--primary)); }

/* Who is online */
.online-table__name { font-weight: 800; }
.online-table__name a { text-decoration: none; }
.online-table__name a:hover, .online-table__name a:focus-visible { text-decoration: underline; }
.online-table td:nth-child(2) { color: #9a9a9a; }

/* Recovery codes */
.recovery-box { padding-top: 14px; display: grid; gap: 11px; border-top: 1px solid var(--line-soft); }
.recovery-box .card-head h3 { margin: 0; }
.recovery-shown { display: grid; gap: 11px; }
.recovery-warning {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(239,202,114,.45);
  border-radius: 3px;
  color: var(--primary-hi);
  background: rgba(239,202,114,.07);
  font-size: 12px;
  line-height: 1.45;
}
.recovery-code-list {
  margin: 0;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: space-evenly;
  gap: 8px 28px;
  list-style: none;
  border: 1px solid #3c3c3c;
  border-radius: 3px;
  color: #f1f1f1;
  background: #171717;
  font-family: Consolas, "Courier New", monospace;
  font-size: 15px;
  letter-spacing: .08em;
}
.pending-note {
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed rgba(239,202,114,.45);
  border-radius: 3px;
  color: #cfcfcf;
  font-size: 12px;
  line-height: 1.45;
}
.pending-note strong { color: var(--primary); overflow-wrap: anywhere; }

/* Bug reports and news lists */
.report-list { display: grid; }
.report {
  padding: 12px 0;
  display: grid;
  gap: 5px;
  border-top: 1px solid #2e2e2e;
}
.report:first-child { border-top: 0; padding-top: 0; }
.report > .link-button { justify-self: start; }
.report__actions { display: flex; flex-wrap: wrap; gap: 18px; }
.report--editing { box-shadow: inset 3px 0 0 var(--primary); padding-left: 12px; }
.report__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.report__head strong { min-width: 0; color: #e4e4e4; font-size: 14px; overflow-wrap: anywhere; }
.report__head .status-pill { flex: 0 0 auto; }
.report__meta { color: #858585; font-size: 12px; }
.report__note { margin: 2px 0 0; color: #cfcfcf; font-size: 13px; line-height: 1.45; }
.report__note strong { color: var(--primary); }
.report__details { font-size: 13px; }
.report__details summary { color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .05em; cursor: pointer; }
.report__details[open] { display: grid; gap: 10px; }
.report__text { margin: 0; color: #cfcfcf; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tracker-count { color: #858585; font-size: 13px; font-weight: 600; }
.tracker-issue__title { min-width: 0; color: #e4e4e4; font-size: 14px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.tracker-issue__title:hover { color: var(--primary-hi); text-decoration: underline; }
.tracker-labels { display: flex; flex-wrap: wrap; gap: 6px; }
.tracker-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border: 1px solid #3f3f3f;
  border-radius: 999px;
  color: #cfcfcf;
  font-size: 11px;
  line-height: 1.5;
}
.tracker-label__dot { width: 8px; height: 8px; border-radius: 50%; background: #888; flex: 0 0 auto; }
.report__code { color: #eaeaea; font-family: Consolas, "Courier New", monospace; font-size: 12px; user-select: all; }
.news-link { color: #dcdcdc; font-size: 13px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.news-link:hover { color: var(--primary); text-decoration: underline; }

/* GM tools */
.gm-tabs { margin-bottom: 0; }
.gm-accounts { grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); }
.gm-search { display: flex; gap: 8px; }
.gm-search .filter-input { flex: 1 1 auto; min-width: 0; }
.gm-results { display: grid; gap: 6px; }
.gm-result {
  width: 100%;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #3a3a3a;
  border-radius: 3px;
  color: inherit;
  background: #1d1d1d;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.gm-result:hover { border-color: rgba(239,202,114,.5); }
.gm-result[aria-pressed="true"] { border-color: var(--primary); background: rgba(239,202,114,.07); }
.gm-result__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gm-result__text strong { color: #e4e4e4; font-size: 13px; overflow-wrap: anywhere; }
.gm-result__text small { color: #858585; font-size: 11px; overflow-wrap: anywhere; }
.gm-pills { display: flex; gap: 6px; }
.gm-ban { grid-template-columns: 150px minmax(0, 1fr); align-items: end; }
.gm-ban .danger-button { grid-column: 1 / -1; height: 40px; }
.gm-characters { display: grid; gap: 7px; }
.gm-characters li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
.gm-characters small { color: #8a8a8a; font-size: 12px; }
.gm-bug { padding-top: 4px; }
.gm-bug .secondary-button { justify-self: start; }

/* News page (news.html) */
.news-page { min-height: 100vh; padding: 104px 16px 60px; background: #141414; }
.news-main { width: 100%; max-width: 820px; margin: 0 auto; display: grid; gap: 22px; }
.news-filter { display: flex; gap: 6px; }
.news-filter .account-tab { height: 34px; padding: 0 12px; }
.news-filter .account-tab[aria-pressed="true"] { color: var(--primary); border-bottom-color: var(--primary); }
.news-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.news-post { scroll-margin-top: 84px; }
.news-post:target { border-color: rgba(239,202,114,.65); }
.news-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #858585; font-size: 12px; }
.news-post__body { display: grid; gap: 10px; color: #cfcfcf; font-size: 14px; line-height: 1.6; }
.news-post__body p { margin: 0; overflow-wrap: anywhere; }
.news-post__body ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
/* Discord-style formatting in news and changelog posts (js/markup.js) */
.md-body p { white-space: pre-line; }
.md-body strong { color: #fff; font-weight: 800; }
.md-body em { font-style: italic; }
.md-body u { text-underline-offset: 2px; }
.md-body s { color: #9a9a9a; }
.md-code { padding: 1px 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; background: rgba(255,255,255,.08); font-family: Consolas, "Courier New", monospace; font-size: .9em; }
.md-codeblock { margin: 0; padding: 10px 12px; overflow-x: auto; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; background: #0e0e0e; color: #e6e6e6; font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.5; white-space: pre; }
.md-body .md-heading { margin: 4px 0 0; color: #fff; font-family: inherit; font-weight: 800; letter-spacing: 0; line-height: 1.25; text-transform: none; }
.md-body .md-heading--1 { font-size: 22px; }
.md-body .md-heading--2 { font-size: 18px; }
.md-body .md-heading--3 { font-size: 16px; }
.md-subtext { display: block; color: #8f8f8f; font-size: 12px; }
.md-quote { display: grid; gap: 8px; margin: 0; padding: 2px 0 2px 12px; border-left: 4px solid #4e4e4e; }
.md-body .md-list { display: grid; gap: 4px; margin: 0; padding-left: 22px; }
.md-body .md-list .md-list { margin-top: 4px; }
.md-link { color: #efca72; overflow-wrap: anywhere; }
.md-spoiler { border-radius: 3px; background: #3c3c3c; color: transparent; cursor: pointer; transition: background .15s; }
.md-spoiler:hover { background: #484848; }
.md-spoiler:focus-visible { outline: 2px solid #efca72; outline-offset: 1px; }
.md-spoiler:not(.md-spoiler--shown) * { border-color: transparent; background: transparent; color: transparent; pointer-events: none; }
.md-spoiler--shown { background: rgba(255,255,255,.1); color: inherit; cursor: auto; }
.md-spoiler--shown { background: rgba(255,255,255,.1); color: inherit; cursor: auto; }
.news-post h2 a { color: inherit; text-decoration: none; }
.news-post h2 a:hover { color: var(--primary); }

@media (max-width: 1100px) {
  .gm-accounts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .online-table th:nth-child(5), .online-table td:nth-child(5) { display: none; }
  .online-table th:nth-child(3), .online-table td:nth-child(3) { display: table-cell; }
  .recovery-code-list { grid-template-columns: max-content; }
  .gm-ban { grid-template-columns: minmax(0, 1fr); }
  .gear-list li { grid-template-columns: 70px minmax(0, 1fr) auto; }
  .character-head .character-card__emblem { width: 46px; height: 46px; font-size: 21px; }
  .news-page { padding-top: 84px; }
}

/* Armory (armory.html) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.armory-main { width: 100%; max-width: 1100px; margin: 0 auto; display: grid; gap: 18px; }
.armory-search { display: flex; gap: 10px; }
.armory-search input {
  min-width: 0;
  height: 43px;
  flex: 1 1 auto;
  padding: 0 12px;
  border: 1px solid #555;
  border-radius: 4px;
  outline: none;
  color: #f1f1f1;
  background: #2a2a2a;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
  font-size: 15px;
}
.armory-search input::placeholder { color: #838383; }
.armory-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(239,202,114,.13), inset 0 1px 2px rgba(0,0,0,.35); }
.armory-search .primary-button { height: 43px; margin-top: 0; padding: 0 24px; }
.armory-results { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.armory-results:empty { display: none; }
.armory-result {
  --class-color: var(--primary);
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  border: 1px solid rgba(96,96,96,.5);
  border-left: 3px solid var(--class-color);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(35,35,35,.92), rgba(24,24,24,.95));
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.armory-result:hover, .armory-result:focus-visible { border-color: var(--class-color); background: #262626; }
.armory-result .character-card__emblem { width: 40px; height: 40px; grid-row: span 2; font-size: 18px; }
.armory-result strong { color: var(--class-color); font-family: Georgia, "Times New Roman", serif; font-size: 17px; }
.armory-result small { overflow: hidden; color: #9a9a9a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.armory-character { display: grid; gap: 18px; }
.armory-back { justify-self: start; }
.armory-loading { margin: 0; color: #9a9a9a; font-size: 14px; }
.armory-head__title { min-width: 0; flex: 1 1 auto; }
.armory-head__side { display: flex; align-items: center; gap: 16px; }
.armory-ilvl { display: grid; justify-items: center; line-height: 1; }
.armory-ilvl strong { color: var(--primary); font-family: Georgia, "Times New Roman", serif; font-size: 28px; }
.armory-ilvl small { margin-top: 4px; color: #777; font-size: 9px; font-weight: 900; letter-spacing: .13em; }

.armory-doll {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "left stats right" "weapons weapons weapons";
  gap: 16px 18px;
  align-items: start;
}
.armory-doll__column { display: grid; gap: 6px; }
.armory-doll__column--left { grid-area: left; }
.armory-doll__column--right { grid-area: right; }
.armory-doll__weapons { grid-area: weapons; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 18px; padding-top: 12px; border-top: 1px solid #2e2e2e; }
.armory-slot {
  width: 100%;
  min-width: 0;
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: inherit;
  background: none;
  font: inherit;
  text-align: left;
}
button.armory-slot { cursor: pointer; transition: background .12s ease, border-color .12s ease; }
button.armory-slot:hover, button.armory-slot:focus-visible { outline: none; border-color: #3d3d3d; background: rgba(255,255,255,.04); }
.armory-slot--right { flex-direction: row-reverse; text-align: right; }
.armory-slot__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid #333;
  border-radius: 6px;
  background: #101010;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.armory-slot__icon img { width: 100%; height: 100%; display: block; }
.armory-slot__letter { color: #cfcfcf; font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 700; }
.armory-slot--empty .armory-slot__icon { border-style: dashed; box-shadow: none; }
.armory-slot__text { min-width: 0; display: grid; gap: 2px; }
.armory-slot__name { overflow: hidden; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.armory-slot__text small { color: #7d7d7d; font-size: 11px; }
.armory-slot--empty .armory-slot__name { color: #5c5c5c; font-weight: 400; }
.armory-slot--empty small { color: #4c4c4c; }

.armory-stats {
  grid-area: stats;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  align-content: start;
  border: 1px solid #2e2e2e;
  border-radius: 4px;
  background: rgba(0,0,0,.25);
}
.armory-stats h3 { margin: 0 0 6px; color: var(--primary); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.armory-stats dl { margin: 0; display: grid; gap: 3px; }
.armory-stat { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.armory-stat dt { color: #9a9a9a; }
.armory-stat dd { margin: 0; color: #ececec; font-weight: 700; font-variant-numeric: tabular-nums; }
.armory-stats--empty { min-height: 220px; grid-template-columns: minmax(0, 1fr); place-content: center; gap: 8px; text-align: center; }
.armory-stats--empty strong { color: #dcdcdc; font-family: Georgia, "Times New Roman", serif; font-size: 17px; }
.armory-stats--empty p { margin: 0; color: #8a8a8a; font-size: 13px; line-height: 1.5; }

.armory-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: max-content;
  max-width: min(340px, calc(100vw - 16px));
  padding: 10px 12px;
  display: grid;
  gap: 2px;
  border: 1px solid #5d5d70;
  border-radius: 5px;
  color: #ffffff;
  background: rgba(7,9,20,.96);
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
}
.armory-tooltip__line { overflow-wrap: anywhere; white-space: pre-line; }
.armory-tooltip__name { font-size: 15px; font-weight: 700; }
.armory-tooltip__split { display: flex; justify-content: space-between; gap: 20px; }
.armory-tooltip__block { margin: 4px 0 2px; display: grid; gap: 2px; }
.armory-tooltip__green { color: #1eff00; }
.armory-tooltip__muted { color: #9d9d9d; }
.armory-tooltip__gold { color: #ffd100; }
.armory-tooltip__socket { display: flex; align-items: center; gap: 6px; }
.armory-tooltip__gem { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 2px; }
.armory-socket { width: 13px; height: 13px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.35); border-radius: 2px; background: #666; }
.armory-socket--1 { background: linear-gradient(135deg, #bbb, #555); }
.armory-socket--2 { background: #c9302c; }
.armory-socket--4 { background: #e3b900; }
.armory-socket--8 { background: #2f68d8; }
.armory-socket--14 { background: linear-gradient(135deg, #c9302c, #e3b900, #2f68d8); }

@media (max-width: 900px) {
  .armory-doll { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "stats stats" "left right" "weapons weapons"; }
  .armory-doll__weapons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .armory-search .primary-button { padding: 0 16px; }
  .armory-head { flex-wrap: wrap; }
  .armory-head__side { width: 100%; justify-content: space-between; }
  .armory-doll { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stats" "left" "right" "weapons"; }
  .armory-doll__column--right { padding-top: 6px; border-top: 1px solid #2e2e2e; }
  .armory-slot--right { flex-direction: row; text-align: left; }
  .armory-doll__weapons { grid-template-columns: minmax(0, 1fr); }
  .armory-stats { grid-template-columns: minmax(0, 1fr); }
}
.character-head .card-link { margin-top: 6px; display: inline-block; }

/* Landing page: the realm right now, heroes, news, classes and the three steps (V2.2) */
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.hero-cta--ghost {
  color: var(--primary);
  background: rgba(20,20,20,.55);
  backdrop-filter: blur(3px);
}
.hero-cta--ghost:hover { color: #151515; }

.live-dot {
  width: 8px;
  height: 8px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: 1px;
  border-radius: 50%;
  background: #6ecf8a;
  box-shadow: 0 0 0 0 rgba(110,207,138,.6);
  animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(110,207,138,.6); }
  80%, 100% { box-shadow: 0 0 0 9px rgba(110,207,138,0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.landing {
  position: relative;
  z-index: 2;
  padding: 72px 24px 64px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(239,202,114,.09), transparent 70%),
    linear-gradient(180deg, #171717, #141414);
  border-top: 1px solid rgba(239,202,114,.22);
}
.landing__inner { width: 100%; max-width: 1180px; margin: 0 auto; }
.landing-head { margin-bottom: 30px; text-align: center; }
.landing-head h2 {
  margin: 6px 0 10px;
  color: #f4f4f4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: .03em;
}
.landing-head p { margin: 0 auto; max-width: 620px; color: var(--muted); font-size: 14px; line-height: 1.5; }

.landing-stats {
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.landing-stat {
  padding: 20px 16px 18px;
  display: grid;
  gap: 6px;
  justify-items: center;
  border: 1px solid rgba(96,96,96,.5);
  border-top: 2px solid rgba(239,202,114,.65);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(38,38,38,.92), rgba(24,24,24,.94));
  box-shadow: 0 12px 34px rgba(0,0,0,.3);
}
.landing-stat strong {
  color: var(--primary);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 22px rgba(239,202,114,.25);
}
.landing-stat span { color: var(--text-alt); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-align: center; }

.landing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.landing-card {
  min-width: 0;
  padding: 22px 22px 20px;
  border: 1px solid rgba(96,96,96,.5);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(35,35,35,.9), rgba(24,24,24,.94));
  box-shadow: 0 18px 52px rgba(0,0,0,.35);
}
.landing-card h3, .class-cloud-wrap h3 {
  margin: 0 0 16px;
  color: #f0f0f0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  letter-spacing: .05em;
}
.landing-card h4 { margin: 22px 0 10px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.landing-card__empty { margin: 0 0 12px; color: var(--muted); font-size: 13px; }

.pulse-bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.pulse-bar {
  display: grid;
  grid-template-columns: minmax(0, 118px) minmax(0, 1fr) 30px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}
.pulse-bar__name { overflow: hidden; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.pulse-bar__track { height: 8px; overflow: hidden; border-radius: 4px; background: rgba(255,255,255,.07); }
.pulse-bar__fill { height: 100%; display: block; border-radius: 4px; box-shadow: 0 0 10px rgba(255,255,255,.12); transition: width .6s ease; }
.pulse-bar__count { color: var(--text-alt); font-variant-numeric: tabular-nums; text-align: right; }

.pulse-levels { height: 118px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pulse-level { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 5px; justify-items: center; }
.pulse-level__count { color: var(--text-alt); font-size: 12px; font-variant-numeric: tabular-nums; }
.pulse-level__track { width: 100%; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); }
.pulse-level__fill {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--primary), var(--primary-low));
  transition: height .6s ease;
}
.pulse-level__label { color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }

.hero-list { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 6px; }
.hero-list__item {
  --class-color: var(--primary);
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  border-left: 3px solid var(--class-color);
  border-radius: 3px;
  color: inherit;
  background: rgba(255,255,255,.035);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease;
}
a.hero-list__item:hover, a.hero-list__item:focus-visible { border-color: rgba(239,202,114,.35); border-left-color: var(--class-color); background: rgba(239,202,114,.08); }
.hero-list__rank { color: var(--muted); font-size: 12px; font-weight: 800; text-align: center; }
.hero-list__text { min-width: 0; display: grid; gap: 2px; }
.hero-list__text strong { color: var(--class-color); font-size: 14px; }
.hero-list__text small { overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.hero-list__level {
  min-width: 34px;
  padding: 3px 6px;
  border: 1px solid rgba(239,202,114,.4);
  border-radius: 3px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.landing-search { display: flex; gap: 8px; }
.landing-search input {
  min-width: 0;
  flex: 1;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  background: #1b1b1b;
}
.landing-search input:focus { outline: none; border-color: var(--primary); }
.landing-search button {
  padding: 0 14px;
  border: 1px solid rgba(239,202,114,.55);
  border-radius: 3px;
  color: var(--primary);
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
}
.landing-search button:hover { color: #151515; background: var(--primary); }

.landing-news { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 10px; }
.landing-news__item {
  padding: 11px 12px;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(96,96,96,.4);
  border-radius: 3px;
  color: inherit;
  background: rgba(255,255,255,.025);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.landing-news__item:hover, .landing-news__item:focus-visible { border-color: rgba(239,202,114,.45); background: rgba(239,202,114,.06); }
.landing-news__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; }
.landing-news__item strong { color: #f0f0f0; font-size: 14px; }
.landing-news__summary { color: var(--text-alt); font-size: 13px; line-height: 1.45; }

.class-cloud-wrap { margin-top: 40px; text-align: center; }
.class-cloud-wrap h3 { margin-bottom: 8px; font-size: clamp(20px, 2.4vw, 26px); }
.class-cloud-wrap h3 span { color: var(--primary); }
.class-cloud-wrap p { margin: 0 auto 18px; max-width: 560px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.class-cloud { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.class-chip {
  --class-color: var(--primary);
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--class-color) 45%, transparent);
  border-radius: 999px;
  color: var(--class-color);
  background: color-mix(in srgb, var(--class-color) 9%, transparent);
  font-size: 13px;
  font-weight: 700;
  transition: transform .15s ease, background .15s ease;
}
.class-chip:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--class-color) 18%, transparent); }

.landing-steps {
  position: relative;
  z-index: 2;
  padding: 64px 24px 70px;
  background: #121212;
  border-top: 1px solid rgba(255,255,255,.06);
}
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.step {
  min-width: 0;
  padding: 28px 22px 22px;
  border: 1px solid rgba(96,96,96,.5);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(33,33,33,.9), rgba(22,22,22,.94));
}
.step__number {
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239,202,114,.7);
  border-radius: 50%;
  color: var(--primary);
  background: rgba(239,202,114,.08);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 800;
}
.step h3 { margin: 0 0 8px; color: #f0f0f0; font-family: Georgia, "Times New Roman", serif; font-size: 19px; }
.step p { margin: 0 0 14px; color: var(--text-alt); font-size: 14px; line-height: 1.5; }
.step p code { color: var(--primary); }
.step__code {
  padding: 9px 11px;
  display: block;
  overflow-wrap: anywhere;
  border: 1px dashed rgba(239,202,114,.45);
  border-radius: 3px;
  color: var(--primary);
  background: #1a1a1a;
  font-size: 13px;
}

.step__download {
  min-height: 40px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--primary);
  border-radius: 3px;
  color: #171717;
  background: linear-gradient(180deg, #f5d98f, var(--primary));
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}
.step__download::before { content: "\2193"; font-size: 15px; }
.step__download:hover { filter: brightness(1.08); }
.step__download:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.step__download[hidden], .step__code[hidden] { display: none; }
.step__meta {
  margin-top: 8px;
  display: block;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .04em;
}
.step__meta[hidden] { display: none; }

@media (max-width: 900px) {
  .hero-cta-row .hero-cta--ghost { min-width: 0; min-height: 40px; display: inline-flex; font-size: 14px; }
  .landing, .landing-steps { padding: 52px 16px 48px; }
  .landing-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-grid, .steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .landing-stats { gap: 10px; }
  .landing-stat { padding: 16px 10px 14px; }
  .landing-card { padding: 18px 16px; }
  .pulse-bar { grid-template-columns: minmax(0, 96px) minmax(0, 1fr) 26px; }
}

/* Landing page polish (V2.3): hero intro, embers, live ribbon, scroll cue, reveal on scroll, medals and glows */
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes panel-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.hero-brand > * { animation: hero-in .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-brand > :nth-child(2) { animation-delay: .12s; }
.hero-brand > :nth-child(3) { animation-delay: .22s; }
.hero-brand > :nth-child(4) { animation-delay: .34s; }
.hero-brand > :nth-child(5) { animation-delay: .46s; }
.hero-brand > :nth-child(6) { animation-delay: .6s; }
.register-panel { animation: panel-in .9s cubic-bezier(.2,.7,.2,1) .3s both; }

@keyframes crest-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(239,202,114,.25)); }
  50% { filter: drop-shadow(0 0 22px rgba(239,202,114,.65)); }
}
.hero-brand__crest { animation: hero-in .9s cubic-bezier(.2,.7,.2,1) both, crest-glow 4.5s ease-in-out 1s infinite; }

.hero-cta--shine { position: relative; overflow: hidden; }
.hero-cta--shine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  animation: cta-shine 6s ease-in-out 1.6s infinite;
  pointer-events: none;
}
@keyframes cta-shine { 0% { left: -60%; } 20%, 100% { left: 130%; } }

.hero-embers { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.hero-embers span {
  --size: 3px;
  --drift: 20px;
  position: absolute;
  bottom: -12px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #ffe2a0;
  box-shadow: 0 0 6px 2px rgba(255,180,80,.55), 0 0 14px 4px rgba(255,150,50,.2);
  opacity: 0;
  animation: ember-rise 12s linear infinite;
}
@keyframes ember-rise {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: .9; }
  50% { transform: translate(var(--drift), -48vh); }
  80% { opacity: .55; }
  100% { opacity: 0; transform: translate(calc(var(--drift) * -.6), -96vh); }
}
.hero-embers span:nth-child(1) { left: 5%; --size: 2px; --drift: -35px; animation-duration: 9s; animation-delay: 0s; }
.hero-embers span:nth-child(2) { left: 12%; --size: 5px; --drift: 2px; animation-duration: 16s; animation-delay: -5s; }
.hero-embers span:nth-child(3) { left: 19%; --size: 4px; --drift: -31px; animation-duration: 15s; animation-delay: -10s; }
.hero-embers span:nth-child(4) { left: 26%; --size: 3px; --drift: 6px; animation-duration: 14s; animation-delay: 0s; }
.hero-embers span:nth-child(5) { left: 33%; --size: 2px; --drift: -27px; animation-duration: 13s; animation-delay: -5s; }
.hero-embers span:nth-child(6) { left: 39%; --size: 5px; --drift: 10px; animation-duration: 12s; animation-delay: -10s; }
.hero-embers span:nth-child(7) { left: 45%; --size: 4px; --drift: -23px; animation-duration: 11s; animation-delay: 0s; }
.hero-embers span:nth-child(8) { left: 51%; --size: 3px; --drift: 14px; animation-duration: 10s; animation-delay: -5s; }
.hero-embers span:nth-child(9) { left: 56%; --size: 2px; --drift: -19px; animation-duration: 9s; animation-delay: -10s; }
.hero-embers span:nth-child(10) { left: 62%; --size: 5px; --drift: 18px; animation-duration: 16s; animation-delay: 0s; }
.hero-embers span:nth-child(11) { left: 68%; --size: 4px; --drift: -15px; animation-duration: 15s; animation-delay: -5s; }
.hero-embers span:nth-child(12) { left: 74%; --size: 3px; --drift: 22px; animation-duration: 14s; animation-delay: -10s; }
.hero-embers span:nth-child(13) { left: 80%; --size: 2px; --drift: -11px; animation-duration: 13s; animation-delay: 0s; }
.hero-embers span:nth-child(14) { left: 86%; --size: 5px; --drift: 26px; animation-duration: 12s; animation-delay: -5s; }
.hero-embers span:nth-child(15) { left: 92%; --size: 4px; --drift: -7px; animation-duration: 11s; animation-delay: -10s; }
.hero-embers span:nth-child(16) { left: 97%; --size: 3px; --drift: 30px; animation-duration: 10s; animation-delay: 0s; }

.hero-live {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.hero-live[hidden], .hero-live__item[hidden] { display: none; }
.hero-live__item {
  min-height: 32px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(239,202,114,.32);
  border-radius: 999px;
  color: #e9e9e9;
  background: rgba(14,14,14,.55);
  backdrop-filter: blur(4px);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: none;
}
.hero-live__item .live-dot { margin-right: 2px; }
.hero-live__item strong {
  color: var(--primary);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.hero-live__item a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.hero-live__item:has(a):hover { border-color: var(--primary); background: rgba(239,202,114,.14); }

a.hero-footer { flex-direction: column; gap: 8px; text-decoration: none; transition: color .15s ease; }
a.hero-footer:hover, a.hero-footer:focus-visible { color: var(--primary); }
.hero-footer__line { display: flex; align-items: center; gap: 13px; }
.hero-footer__chevron {
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
  animation: chevron-bob 2s ease-in-out infinite;
}
@keyframes chevron-bob { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(6px) rotate(45deg); } }

.landing-head h2::after {
  content: "\25C6";
  display: block;
  width: 170px;
  margin: 12px auto 0;
  color: var(--primary);
  font-size: 9px;
  line-height: 9px;
  text-align: center;
  background:
    linear-gradient(90deg, transparent, rgba(239,202,114,.7)) left center / calc(50% - 12px) 1px no-repeat,
    linear-gradient(270deg, transparent, rgba(239,202,114,.7)) right center / calc(50% - 12px) 1px no-repeat;
}

.landing-stat { position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.landing-stat::before {
  content: "";
  position: absolute;
  inset: -40% 10% auto;
  height: 90%;
  background: radial-gradient(closest-side, rgba(239,202,114,.13), transparent);
  pointer-events: none;
}
.landing-stat:hover { transform: translateY(-3px); border-top-color: var(--primary); box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(239,202,114,.16); }
.landing-stat__icon {
  width: 26px;
  height: 26px;
  margin-bottom: 2px;
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}

.landing-card, .step { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.landing-card:hover, .step:hover { transform: translateY(-2px); border-color: rgba(239,202,114,.3); box-shadow: 0 22px 56px rgba(0,0,0,.45); }
.step__number { box-shadow: 0 0 18px rgba(239,202,114,.18); }

.hero-list li:nth-child(-n+3) .hero-list__rank {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #1a1a1a;
  font-size: 11px;
  box-shadow: 0 0 10px rgba(0,0,0,.4);
}
.hero-list li:nth-child(1) .hero-list__rank { background: linear-gradient(160deg, #fff0b8, #d6a53b); box-shadow: 0 0 12px rgba(239,202,114,.45); }
.hero-list li:nth-child(2) .hero-list__rank { background: linear-gradient(160deg, #f7f7f7, #a7adb5); }
.hero-list li:nth-child(3) .hero-list__rank { background: linear-gradient(160deg, #ffc896, #a8642e); }

.class-chip:hover { border-color: var(--class-color); box-shadow: 0 0 16px color-mix(in srgb, var(--class-color) 40%, transparent); }

/* Reveal on scroll: landing.js adds .reveal-ready only when it can also reveal the blocks again. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease var(--reveal-delay, 0s), transform .7s cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0s);
}
.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .hero-embers span:nth-child(n+9) { display: none; }
  .hero-live { margin-top: 4px; }
  .hero-live__item { min-height: 28px; padding: 0 11px; font-size: 10px; }
  .hero-live__item strong { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-brand > *, .hero-brand__crest, .register-panel, .hero-cta--shine::after, .hero-footer__chevron { animation: none; }
  .hero-embers { display: none; }
  .landing-stat:hover, .landing-card:hover, .step:hover { transform: none; }
}

/* ---- V2.3: site banner ---- */
.site-notice {
  --notice-color: var(--primary);
  position: relative;
  z-index: 25;
  margin-top: 64px;
  padding: 10px 52px 10px 20px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid color-mix(in srgb, var(--notice-color) 45%, transparent);
  color: #f3f3f3;
  background: color-mix(in srgb, var(--notice-color) 14%, #181818);
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.site-notice--warning { --notice-color: #ff9d3c; }
.site-notice--danger { --notice-color: #ff6b5a; }
.site-notice__text { margin: 0; max-width: 1100px; font-size: 14px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.site-notice__label {
  margin-right: 10px;
  padding: 2px 7px;
  display: inline-block;
  border-radius: 3px;
  color: #151515;
  background: var(--notice-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  vertical-align: 1px;
}
.site-notice__until { margin-left: 10px; color: var(--text-alt); font-size: 12px; white-space: nowrap; }
.site-notice__close {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 3px;
  color: var(--text-alt);
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.site-notice__close:hover, .site-notice__close:focus-visible { color: #fff; background: rgba(255,255,255,.08); }
.site-notice--inline { margin: 0 0 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--notice-color) 45%, transparent); border-radius: 4px; box-shadow: none; }
.site-notice--inline .site-notice__text { text-align: left; }
body.has-site-notice .hero, body.has-site-notice .ucp { padding-top: 0; }
body.has-site-notice .news-page { padding-top: 40px; }

/* Eight nav items: tighten them before the menu collapses at 900px. */
@media (max-width: 1360px) and (min-width: 901px) {
  .topbar__inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; padding: 0 16px; }
  .topbar__nav { justify-content: center; }
  .nav-item { padding: 0 8px; font-size: 13px; white-space: nowrap; }
  .realm-chip { display: none; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .topbar__brandtext, .server-status { display: none; }
  .nav-item { padding: 0 6px; font-size: 12px; letter-spacing: 0; }
}

/* ---- V2.3: landing page (players over time, milestones, class links) ---- */
.class-cloud li { display: flex; }
a.class-chip { display: inline-block; text-decoration: none; }
a.class-chip:focus-visible { outline: 2px solid var(--class-color); outline-offset: 2px; }
.landing-grid--wide { margin-top: 14px; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.landing-card__head { margin-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.landing-card__head h3 { margin: 0; }
.range-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.range-toggle button {
  padding: 5px 10px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  cursor: pointer;
}
.range-toggle button + button { border-left: 1px solid var(--line); }
.range-toggle button[aria-pressed="true"] { color: #151515; background: var(--primary); }
.history-chart { position: relative; min-height: 20px; }
.history-chart__svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.history-chart__grid { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.history-chart__label { fill: var(--muted); font-size: 11px; font-family: Inter, "Segoe UI", Arial, sans-serif; }
.history-chart__line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.history-chart__area { fill: rgba(239,202,114,.12); stroke: none; }
.history-chart__offline { fill: rgba(255,107,90,.1); }
.history-chart__marker { fill: var(--primary); stroke: #151515; stroke-width: 2; }
.history-chart__readout {
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 8px;
  border: 1px solid rgba(239,202,114,.4);
  border-radius: 3px;
  color: var(--primary);
  background: rgba(20,20,20,.92);
  font-size: 12px;
  pointer-events: none;
}
.history-facts { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.history-facts__item { display: grid; gap: 2px; }
.history-facts dt { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.history-facts dd { margin: 0; color: var(--primary); font-family: Georgia, "Times New Roman", serif; font-size: 20px; }
.history-restarts { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.history-restarts li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.history-restarts small { color: var(--muted); }
.history-restarts__empty { color: var(--muted); }

.activity-feed { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.activity-feed__item {
  --class-color: var(--primary);
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-left: 3px solid var(--class-color);
  border-radius: 3px;
  color: inherit;
  background: rgba(255,255,255,.035);
  text-decoration: none;
  transition: background .15s ease;
}
.activity-feed__item:hover, .activity-feed__item:focus-visible { background: rgba(239,202,114,.08); }
.activity-feed__level {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--class-color) 60%, transparent);
  border-radius: 50%;
  color: var(--class-color);
  font-weight: 800;
  font-size: 13px;
}
.activity-feed__text { min-width: 0; display: grid; gap: 2px; }
.activity-feed__headline { font-size: 13px; }
.activity-feed__headline strong { color: var(--class-color); }
.activity-feed__text small { overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.realm-firsts { margin: 0 0 14px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.realm-firsts__item {
  --class-color: var(--primary);
  padding: 7px 10px;
  display: grid;
  gap: 1px;
  border: 1px solid rgba(239,202,114,.22);
  border-radius: 3px;
  color: inherit;
  background: rgba(239,202,114,.04);
  text-decoration: none;
}
.realm-firsts__item:hover, .realm-firsts__item:focus-visible { border-color: rgba(239,202,114,.55); }
.realm-firsts__level { color: var(--primary); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.realm-firsts__item strong { color: var(--class-color); font-size: 14px; }
.realm-firsts__item small { color: var(--muted); font-size: 11px; }

.badge {
  padding: 3px 8px;
  display: inline-block;
  border: 1px solid rgba(239,202,114,.5);
  border-radius: 3px;
  color: var(--primary);
  background: rgba(239,202,114,.08);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
}
.badge--realm { color: #151515; border-color: transparent; background: linear-gradient(160deg, #fff0b8, #d6a53b); box-shadow: 0 0 12px rgba(239,202,114,.35); }
.badge--hunter { color: #b6f0c4; border-color: rgba(169,231,187,.5); background: rgba(169,231,187,.08); }

/* ---- V2.3: Armory badges, leaderboards and guild pages ---- */
.armory-badges { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.armory-head__title a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.35); }
.armory-head__title a:hover, .armory-head__title a:focus-visible { color: var(--primary); border-bottom-color: var(--primary); }
.armory-boards { display: grid; gap: 14px; margin-top: 10px; }
.board-head h2 { margin: 0 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: 24px; }
.board-head p { margin: 0; color: var(--muted); font-size: 14px; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.card-note { color: var(--muted); font-size: 12px; }
.board-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; counter-reset: board; }
.board-list > li { counter-increment: board; }
.board-entry {
  --class-color: var(--primary);
  padding: 7px 10px 7px 8px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border-left: 3px solid var(--class-color);
  border-radius: 3px;
  color: inherit;
  background: rgba(255,255,255,.035);
  text-decoration: none;
  transition: background .15s ease;
}
.board-entry::before { content: counter(board); color: var(--muted); font-size: 12px; font-weight: 800; text-align: center; }
.board-list--plain .board-entry { grid-template-columns: minmax(0, 1fr) auto; padding-left: 10px; }
.board-list--plain .board-entry::before { content: none; }
a.board-entry:hover, a.board-entry:focus-visible { background: rgba(239,202,114,.08); }
.board-entry__text { min-width: 0; display: grid; gap: 2px; }
.board-entry__text strong { overflow: hidden; color: var(--class-color); font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.board-entry__text small, .board-entry__value small { overflow: hidden; color: var(--muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.board-entry__value { max-width: 140px; display: grid; justify-items: end; gap: 1px; text-align: right; }
.board-entry__value strong { color: var(--primary); font-size: 14px; font-variant-numeric: tabular-nums; }
.board-entry__value--rank strong { color: var(--text-alt); font-size: 12px; font-weight: 700; }
.board-entry--open { --class-color: #3c3c3c; opacity: .7; }
.board-entry--open .board-entry__text strong { color: var(--muted); }
.progress--class .progress__fill { background: var(--class-color, var(--primary)); }
.guild-head .register-panel__kicker { display: block; margin-bottom: 2px; }
.meter-row__top a { color: #dcdcdc; font-weight: 700; text-decoration: none; }
.meter-row__top a:hover { color: var(--primary); }

/* ---- V2.3: class pages ---- */
.classes-main { width: 100%; max-width: 1100px; margin: 0 auto; display: grid; gap: 18px; }
.classes-main > .ucp-head { display: grid; gap: 10px; }
.class-index { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.class-tile {
  --class-color: var(--primary);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  border: 1px solid rgba(96,96,96,.5);
  border-left: 3px solid var(--class-color);
  border-radius: 4px;
  color: inherit;
  background: linear-gradient(180deg, rgba(35,35,35,.92), rgba(24,24,24,.95));
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.class-tile:hover, .class-tile:focus-visible { border-color: var(--class-color); transform: translateY(-2px); }
.class-tile .character-card__emblem { width: 40px; height: 40px; grid-row: span 2; font-size: 18px; }
.class-tile strong { color: var(--class-color); font-family: Georgia, "Times New Roman", serif; font-size: 17px; }
.class-tile small { color: var(--muted); font-size: 12px; }
.class-head h1 { color: var(--class-color); }
.class-detail { display: grid; gap: 14px; }
.class-grid { align-items: start; }
.issue-list { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
.issue-list__item {
  padding: 9px 12px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(96,96,96,.4);
  border-radius: 3px;
  color: inherit;
  background: rgba(255,255,255,.025);
  text-decoration: none;
}
.issue-list__item:hover, .issue-list__item:focus-visible { border-color: rgba(239,202,114,.45); background: rgba(239,202,114,.06); }
.issue-list__item strong { color: #f0f0f0; font-size: 14px; overflow-wrap: anywhere; }
.issue-list__item small { color: var(--muted); font-size: 12px; }

/* ---- V2.3: FAQ ---- */
.faq-main { width: 100%; max-width: 820px; margin: 0 auto; display: grid; gap: 22px; }
.faq-main a { color: var(--primary); }
.faq-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-toc a {
  padding: 6px 12px;
  border: 1px solid rgba(239,202,114,.4);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.faq-toc a:hover { background: rgba(239,202,114,.1); }
.faq-group { display: grid; gap: 8px; scroll-margin-top: 84px; }
.faq-group h2 { margin: 6px 0 4px; font-family: Georgia, "Times New Roman", serif; font-size: 22px; }
.faq-group details {
  border: 1px solid rgba(96,96,96,.5);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(35,35,35,.9), rgba(24,24,24,.94));
  scroll-margin-top: 84px;
}
.faq-group details[open] { border-color: rgba(239,202,114,.45); }
.faq-group summary {
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #f0f0f0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-group summary::-webkit-details-marker { display: none; }
.faq-group summary::after { content: "+"; color: var(--primary); font-size: 18px; line-height: 1; }
.faq-group details[open] summary::after { content: "\2013"; }
.faq-group details > :not(summary) { margin: 0 16px 14px; color: var(--text-alt); font-size: 14px; line-height: 1.6; }
.faq-group details ol, .faq-group details ul { padding-left: 36px; }
.faq-group code { padding: 1px 5px; border-radius: 3px; color: #f0f0f0; background: rgba(255,255,255,.07); font-size: 13px; overflow-wrap: anywhere; }
.faq-realmlist { max-width: 520px; }

@media (max-width: 900px) {
  .landing-grid--wide { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  body.has-site-notice .news-page { padding-top: 20px; }
  .site-notice { padding: 9px 46px 9px 14px; }
  .site-notice__text { font-size: 13px; text-align: left; }
  .site-notice__until { display: block; margin: 2px 0 0; }
  .board-grid { grid-template-columns: minmax(0, 1fr); }
  .board-entry__value { max-width: 110px; }
}

/* ---- V2.5: talent calculator (/talents) ---- */
.talents-main { width: 100%; max-width: 1180px; margin: 0 auto; display: grid; gap: 18px; }
.talents-main > .ucp-head { display: grid; gap: 10px; }
.talent-head-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
.talent-planner { display: grid; gap: 16px; }
.talent-spec-description { max-width: 760px; }
.talent-spec-description:empty { display: none; }

.talent-toolbar { --class-color: var(--primary); gap: 16px; }
.talent-specs { display: flex; flex-wrap: wrap; gap: 8px; }
.talent-spec {
  position: relative;
  height: 44px;
  padding: 0 16px 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #4a4a4a;
  border-radius: 4px;
  color: #d4d4d4;
  background: #1e1e1e;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.talent-spec:hover, .talent-spec:focus-visible { outline: none; border-color: var(--class-color); color: #fff; }
.talent-spec__icon { width: 32px; height: 32px; border-radius: 3px; }
.talent-spec--active { border-color: var(--class-color); color: var(--class-color); background: #262626; box-shadow: inset 0 -2px var(--class-color); }
.talent-spec--changed::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffb347;
}

.talent-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; gap: 14px 18px; align-items: end; }
.talent-level { display: grid; gap: 5px; }
.talent-level span, .talent-meter__label, .talent-share__label { color: #8a8a8a; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.talent-level select {
  height: 40px;
  min-width: 84px;
  padding: 0 10px;
  border: 1px solid #555;
  border-radius: 4px;
  color: #f1f1f1;
  background: #2a2a2a;
  font: inherit;
  font-weight: 700;
}
.talent-level select:focus { outline: none; border-color: var(--primary); }
.talent-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 10px; }
.talent-meter strong { color: #f1f1f1; font-family: Georgia, "Times New Roman", serif; font-size: 20px; line-height: 1; }
.talent-meter__bar { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 4px; background: #121212; box-shadow: inset 0 0 0 1px #333; }
.talent-meter__fill { display: block; width: 0; height: 100%; border-radius: 4px; transition: width .2s ease; }
.talent-meter--te .talent-meter__fill { background: linear-gradient(90deg, #3d7fd6, #79b8ff); }
.talent-meter--ae .talent-meter__fill { background: linear-gradient(90deg, var(--primary-low), var(--primary)); }
.talent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.talent-action { height: 40px; }
.talent-action--on { color: #151515; background: var(--danger); border-color: var(--danger); }
.talent-share { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.talent-share input {
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #555;
  border-radius: 4px;
  outline: none;
  color: #cfcfcf;
  background: #222;
  font-size: 13px;
}
.talent-share input:focus { border-color: var(--primary); }
.talent-share .primary-button { height: 40px; margin-top: 0; padding: 0 20px; }

.talent-trees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.talent-tree { padding: 16px 16px 18px; gap: 12px; }
.talent-tree__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.talent-tree__title { min-width: 0; display: flex; align-items: center; gap: 10px; }
.talent-tree__title h2 { font-size: 18px; }
.talent-tree__title small { color: #8a8a8a; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.talent-tree__icon { width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid #555; border-radius: 4px; }
.talent-tree__spent { color: var(--primary); font-family: Georgia, "Times New Roman", serif; font-size: 26px; line-height: 1; }
.talent-tree--spec .talent-tree__spent { color: #79b8ff; }

.talent-grid {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 10), minmax(0, 1fr));
  border: 1px solid #303030;
  border-radius: 4px;
  background: radial-gradient(ellipse at 50% 0%, rgba(239,202,114,.06), transparent 60%), #151515;
}
.talent-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.talent-link { stroke: #363636; stroke-width: 3; }
.talent-link--open { stroke: #6a5a35; }
.talent-link--on { stroke: var(--primary); }
.talent-cell { position: relative; min-width: 0; min-height: 0; padding: 9%; display: flex; align-items: center; justify-content: center; gap: 2px; }
.talent-node {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid #4a4a4a;
  border-radius: 5px;
  color: #1eff00;
  background: #0d0d0d;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.talent-cell--choice .talent-node { width: 50%; aspect-ratio: 1 / 2; border-radius: 4px; }
.talent-node__icon { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 3px; }
.talent-node:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.talent-node__rank {
  position: absolute;
  right: -7px;
  bottom: -7px;
  min-width: 22px;
  padding: 0 3px;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: inherit;
  background: #0b0b0b;
  font-size: 11px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
}
.talent-node__rank:empty { display: none; }
.talent-node--locked { border-color: #3a3a3a; color: #8a8a8a; cursor: default; }
.talent-node--locked .talent-node__icon { filter: grayscale(1) brightness(.45); }
.talent-node--available { border-color: #1eff00; box-shadow: 0 0 8px rgba(30,255,0,.25); }
.talent-node--partial { border-color: #1eff00; }
.talent-node--maxed { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 10px rgba(239,202,114,.3); }
.talent-node--granted { border-color: #66ddff; cursor: default; }
.talent-node:hover:not(.talent-node--locked):not(.talent-node--granted) { box-shadow: 0 0 12px rgba(255,255,255,.3); }
.talent-node--changed::before {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 1;
  width: 9px;
  height: 9px;
  border: 1px solid #0b0b0b;
  border-radius: 50%;
  background: #ffb347;
}
.talent-node--flash { animation: talent-flash .8s ease 2; }
.talent-node--denied { animation: talent-denied .3s ease; }
@keyframes talent-flash { 50% { box-shadow: 0 0 0 4px #ffb347, 0 0 18px #ffb347; } }
@keyframes talent-denied { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.talent-help { margin: 0; color: #8a8a8a; font-size: 13px; line-height: 1.5; }

.talent-tooltip__cost { color: #fff; }
.talent-tooltip__unmet { color: #ff4040; }
.talent-tooltip__choice { color: #66ddff; }
.talent-tooltip__next { margin-top: 4px; color: #fff; }
.talent-tooltip__changed { margin-top: 4px; color: #ffb347; }
.talent-tooltip__hint { margin-top: 4px; font-size: 12px; }

.talent-changes__list { display: grid; gap: 14px; }
.talent-change { display: grid; gap: 8px; }
.talent-change + .talent-change { padding-top: 14px; border-top: 1px solid #333; }
.talent-change__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.talent-change__title { color: var(--primary); font-weight: 800; text-decoration: none; }
.talent-change__title:hover, .talent-change__title:focus-visible { color: var(--primary-hi); text-decoration: underline; }
.talent-change__head small { color: var(--muted); font-size: 12px; }
.talent-change__lines { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: #d0d0d0; font-size: 14px; line-height: 1.5; }
.talent-change__text > :first-child { margin-top: 0; }
.talent-change__text > :last-child { margin-bottom: 0; }
.talent-change__talents { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.talent-chip {
  padding: 2px 9px 2px 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #4b4b4b;
  border-radius: 3px;
  color: #ddd;
  background: #1d1d1d;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.talent-chip:hover, .talent-chip:focus-visible { outline: none; border-color: #ffb347; color: #fff; }
.talent-chip__icon { width: 20px; height: 20px; border-radius: 2px; }
#characterArmoryLink:not([hidden]) + #characterTalentLink { margin-left: 16px; }
.armory-head__title .class-talents-link { margin-top: 8px; display: inline-block; border-bottom: 0; color: var(--primary); font-size: 13px; }
.armory-head__title .class-talents-link:hover, .armory-head__title .class-talents-link:focus-visible { color: var(--primary-hi); text-decoration: underline; }

/* V2.8: popular talents and saved builds under the calculator */
.talent-community { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.talent-community .ucp-card { margin: 0; }
.talent-popular__body, .talent-builds__body { display: grid; gap: 12px; }
.talent-popular__summary { margin: 0; color: #d0d0d0; font-size: 14px; line-height: 1.5; }
.talent-popular__load { justify-self: start; height: 38px; margin-top: 0; }
.talent-popular__heading { margin: 6px 0 0; color: #8a8a8a; font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.talent-picks, .talent-top, .talent-saved { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.talent-pick {
  width: 100%;
  padding: 4px 8px 6px 4px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  border: 1px solid #333;
  border-radius: 3px;
  color: #ddd;
  background: #1a1a1a;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.talent-pick:hover, .talent-pick:focus-visible { outline: none; border-color: #ffb347; color: #fff; }
.talent-pick__icon { width: 24px; height: 24px; border-radius: 2px; grid-row: span 2; }
.talent-pick__name { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.talent-pick__value { color: var(--primary); font-size: 12px; }
.talent-pick__bar { grid-column: 2 / -1; height: 4px; overflow: hidden; border-radius: 2px; background: #111; }
.talent-pick__fill { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--primary-low), var(--primary)); }
.talent-top__item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 0; border-top: 1px solid #2a2a2a; }
.talent-top__name { font-weight: 800; text-decoration: none; }
.talent-top__name:hover, .talent-top__name:focus-visible { text-decoration: underline; }
.talent-top__level { color: var(--muted); font-size: 12px; }
.talent-top__open { margin-left: auto; font-size: 13px; }
.talent-tooltip__popular { margin-top: 4px; color: #9fd3ff; }

.talent-save { display: grid; gap: 6px; }
.talent-save__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.talent-save__name {
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #555;
  border-radius: 4px;
  outline: none;
  color: #e6e6e6;
  background: #222;
  font-size: 14px;
}
.talent-save__name:focus { border-color: var(--primary); }
.talent-save .primary-button { height: 40px; margin-top: 0; padding: 0 20px; }
.talent-save__status { margin: 0; min-height: 1em; color: var(--ok); font-size: 13px; }
.talent-save__status:empty { display: none; }
.talent-save__status.error { color: var(--danger); }
.talent-saved__item {
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  border: 1px solid #333;
  border-radius: 3px;
  background: #1a1a1a;
}
.talent-saved__item--current { border-color: var(--primary); }
.talent-saved__text { min-width: 0; display: grid; gap: 2px; }
.talent-saved__text strong { overflow-wrap: anywhere; color: #f1f1f1; }
.talent-saved__text small { color: var(--muted); font-size: 12px; }
.talent-saved__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.talent-saved__open { height: 34px; margin-top: 0; padding: 0 14px; display: inline-flex; align-items: center; text-decoration: none; }
.talent-saved__delete {
  height: 34px;
  padding: 0 12px;
  border: 1px solid #4b4b4b;
  border-radius: 4px;
  color: #bbb;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.talent-saved__delete:hover, .talent-saved__delete:focus-visible { outline: none; border-color: var(--danger); color: var(--danger); }
.talent-saved__delete--confirm { border-color: var(--danger); color: #151515; background: var(--danger); }
.talent-saved__delete--confirm:hover, .talent-saved__delete--confirm:focus-visible { color: #151515; }
.talent-saved__others { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
@media (max-width: 900px) {
  .talent-community { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1000px) {
  .talent-trees { grid-template-columns: minmax(0, 1fr); }
  .talent-tree { width: 100%; max-width: 620px; justify-self: center; }
  .talent-controls { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
  .talent-actions { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .talent-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .talent-level { grid-column: 1 / -1; }
  .talent-share { grid-template-columns: minmax(0, 1fr) auto; }
  .talent-share__label { grid-column: 1 / -1; }
  .talent-tree { padding: 12px 10px 14px; }
  .talent-node { border-width: 1px; border-radius: 3px; }
  .talent-node__rank { right: -5px; bottom: -6px; min-width: 18px; font-size: 9px; line-height: 12px; }
  .talent-spec { height: 40px; padding-right: 12px; font-size: 13px; }
  .talent-spec__icon { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .talent-node--flash, .talent-node--denied { animation: none; }
  .talent-node--flash { box-shadow: 0 0 0 3px #ffb347; }
  .talent-meter__fill { transition: none; }
}

/* ---- V2.6: status of several realms (top bar and landing page) ---- */
.server-status--realms { gap: 12px; padding: 0 10px; }
.server-status--realms > .server-status__dot { display: none; }
.server-status--realms .server-status__text { display: inline-flex; align-items: center; gap: 12px; }
.server-status--mixed { border-color: rgba(239,202,114,.45); color: var(--text-alt); }
.server-status__realm { display: inline-flex; align-items: center; gap: 6px; }
.server-status__realm + .server-status__realm { padding-left: 12px; border-left: 1px solid rgba(255,255,255,.14); }
.server-status__realm--online .server-status__dot, .realm-card--online .server-status__dot {
  background: #6ecf8a;
  box-shadow: 0 0 6px rgba(110,207,138,.7);
}
.server-status__realm--offline .server-status__dot, .realm-card--offline .server-status__dot {
  background: #ff7d64;
  box-shadow: 0 0 6px rgba(255,125,100,.6);
}
.server-status__name { color: #e6e6e6; }
.server-status__realm--online .server-status__count { color: var(--ok); font-variant-numeric: tabular-nums; }
.server-status__realm--offline .server-status__count { color: var(--danger); }

.realm-status { margin: -8px 0 22px; }
.realm-status__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.realm-card {
  padding: 14px 16px;
  border: 1px solid rgba(96,96,96,.5);
  border-left: 3px solid #8a8a8a;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(38,38,38,.92), rgba(24,24,24,.94));
}
.realm-card--online { border-left-color: #6ecf8a; }
.realm-card--offline { border-left-color: #ff7d64; }
.realm-card__head { display: flex; align-items: center; gap: 10px; }
.realm-card__name {
  min-width: 0;
  overflow: hidden;
  color: #f4f4f4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.realm-card__state { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.realm-card--online .realm-card__state { color: var(--ok); }
.realm-card--offline .realm-card__state { color: var(--danger); }
.realm-card__players { margin: 6px 0 0 18px; color: var(--text-alt); font-size: 13px; }
.realm-status__note { margin: 12px auto 0; max-width: 720px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }
/* A status pill per realm is wider. Up to 1360px the menu is centred between the brand and the actions; above that the
   side columns are equal, so the menu sits in the middle of the page (a side only grows past its share when its
   content needs the room). */
@media (min-width: 901px) {
  .topbar__inner { grid-template-columns: auto minmax(0, 1fr) auto; }
  .topbar__nav { justify-content: center; }
}
@media (min-width: 1361px) {
  .topbar__inner { grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
}
/* With a status pill per realm the menu only fits in the middle of the page from about 1830px with the realm chip
   (1560px without it), so the chip waits until then. */
@media (max-width: 1860px) and (min-width: 1361px) {
  .topbar__inner:has(.server-status--realms) .realm-chip { display: none; }
}
@media (max-width: 1620px) and (min-width: 1361px) {
  .topbar__inner:has(.server-status--realms) .nav-item { padding: 0 9px; }
}
@media (max-width: 1360px) and (min-width: 1240px) {
  .topbar__inner:has(.server-status--realms) .topbar__brandtext { display: none; }
}
@media (max-width: 1239px) and (min-width: 1181px) {
  .server-status--realms { display: none; }
}

/* Bug report media (V2.7) */
.field input.media-input {
  height: auto;
  padding: 8px;
  color: #9a9a9a;
  font-size: 13px;
  cursor: pointer;
}
.field input.media-input::file-selector-button {
  margin-right: 12px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--primary-low);
  border-radius: 3px;
  color: var(--primary);
  background: #202020;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  cursor: pointer;
}
.field input.media-input:hover::file-selector-button { color: #151515; background: var(--primary); }
.media-picks { margin: 8px 0 0; padding: 0; display: grid; gap: 6px; list-style: none; }
.media-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  background: #222;
  font-size: 13px;
}
.media-pick__kind { flex: 0 0 auto; color: var(--primary); font-size: 10px; font-weight: 900; letter-spacing: .07em; }
.media-pick__name { flex: 1 1 auto; min-width: 0; color: #dcdcdc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field .media-pick small { flex: 0 0 auto; margin: 0; }
.media-pick .link-button { flex: 0 0 auto; }
.report-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.report-media__item { margin: 0; display: grid; gap: 4px; min-width: 0; }
.report-media__item--video { grid-column: 1 / -1; }
.report-media__link { display: block; border: 1px solid #3a3a3a; border-radius: 4px; overflow: hidden; background: #111; }
.report-media__link:hover { border-color: var(--primary-low); }
.report-media__item img { display: block; width: 100%; height: 120px; object-fit: cover; }
.report-media__item video { display: block; width: 100%; max-height: 240px; border: 1px solid #3a3a3a; border-radius: 4px; background: #000; }
.report-media__item figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; color: #858585; font-size: 11px; }
.report-media__add { display: grid; justify-items: start; gap: 6px; }
@media (max-width: 520px) {
  .report-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-media__item img { height: 96px; }
}

/* ---- V2.8: Known bugs page, bug report updates and suggestions ---- */
.bugs-main { width: 100%; max-width: 1100px; margin: 0 auto; display: grid; gap: 16px; }
.bugs-main > .ucp-head { display: grid; gap: 10px; }
.bugs-main > .ucp-head a { color: var(--primary); }
.bugs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bugs-stat {
  padding: 12px 14px;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(96,96,96,.5);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(35,35,35,.92), rgba(24,24,24,.95));
}
.bugs-stat strong { font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-variant-numeric: tabular-nums; }
.bugs-stat span { color: var(--muted); font-size: 12px; }
.bugs-stat--warn strong { color: var(--primary); }
.bugs-stat--ok strong { color: var(--ok); }
.bugs-stat--off strong { color: var(--text-alt); }
.bugs-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bugs-filter { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.bugs-filter__button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid #444;
  border-radius: 3px;
  color: var(--text-alt);
  background: #1d1d1d;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
}
.bugs-filter__button:hover, .bugs-filter__button:focus-visible { border-color: var(--primary-low); color: var(--text); }
.bugs-filter__button[aria-pressed="true"] { border-color: var(--primary); color: #1b1b1b; background: var(--primary); }
.bugs-filter--small .bugs-filter__button { height: 28px; padding: 0 10px; font-size: 10px; }
.bugs-search { flex: 0 1 320px; }
.bugs-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #444;
  border-radius: 3px;
  color: var(--text);
  background: #1b1b1b;
  font: inherit;
  font-size: 14px;
}
.bugs-search input:focus { outline: none; border-color: var(--primary); }
.bugs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.bugs-list-card { display: grid; gap: 12px; }
.known-bug { scroll-margin-top: 90px; }
.known-bug--fixed .report__head strong { color: var(--text-alt); }
.known-bug--target { box-shadow: inset 3px 0 0 var(--primary); padding-left: 12px; }
.known-bug__affected { color: var(--primary); font-weight: 700; }
.known-bug__affected[hidden] { display: none; }
.known-bug__fixed { margin: 0; color: #cfcfcf; font-size: 13px; }
.known-bug__fixed strong { color: var(--ok); }
.known-bug__fixed a { color: var(--primary); }
.known-bug__vote { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.known-bug__vote .form-message { margin: 0; font-size: 12px; }
.known-bug__button { height: 32px; padding: 0 12px; font-size: 11px; }
.known-bug__button--on { border-color: var(--primary); color: var(--primary); }
.bugs-testers { display: grid; gap: 10px; }
.bugs-testers .card-head { flex-wrap: wrap; gap: 8px; }
.bugs-testers .card-note { margin: 0; }
.nav-badge {
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: #1b1b1b;
  background: var(--primary);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  vertical-align: 1px;
}
.nav-badge[hidden] { display: none; }
.report--updated { box-shadow: inset 3px 0 0 var(--primary); padding-left: 12px; }
.report__affected { color: var(--primary); }
.bug-notify { display: flex; align-items: flex-start; gap: 8px; color: var(--text-alt); font-size: 13px; line-height: 1.45; cursor: pointer; }
.bug-notify input { margin-top: 2px; accent-color: var(--primary); }
.bug-similar {
  padding: 10px 12px;
  display: grid;
  gap: 6px;
  border: 1px solid rgba(239,202,114,.35);
  border-radius: 4px;
  background: rgba(239,202,114,.05);
  font-size: 13px;
}
.bug-similar[hidden] { display: none; }
.bug-similar > strong { color: var(--primary); font-size: 12px; letter-spacing: .04em; }
.bug-similar ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.bug-similar a { color: #e4e4e4; overflow-wrap: anywhere; }
.bug-similar a:hover { color: var(--primary-hi); }
.bug-similar small { color: var(--muted); }
@media (max-width: 900px) {
  .bugs-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .bugs-stats { grid-template-columns: minmax(0, 1fr); }
  .bugs-stat { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 10px; }
  .bugs-stat strong { font-size: 20px; }
  .bugs-search { flex-basis: 100%; }
}
.ucp-nav__item .nav-badge { margin-left: auto; }
.inline-link { color: var(--primary); }
.inline-link:hover { color: var(--primary-hi); }

/* ---- V2.8: realm status page (/status) ---- */
a.server-status { text-decoration: none; transition: border-color .15s ease, background .15s ease; }
a.server-status:hover, a.server-status:focus-visible { background: #333; border-color: var(--primary-low); }
a.server-status[aria-current="page"] { border-color: var(--primary-low); }
.realm-status__more { margin: 10px 0 0; text-align: center; font-size: 13px; }
.realm-status__more a { color: var(--primary); }
.realm-status__more a:hover { color: var(--primary-hi); }
.status-main { width: 100%; max-width: 1000px; margin: 0 auto; display: grid; gap: 16px; }
.status-main > .ucp-head { display: grid; gap: 10px; }
.status-summary {
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  border: 1px solid rgba(96,96,96,.5);
  border-left: 4px solid #8a8a8a;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(38,38,38,.92), rgba(24,24,24,.94));
}
.status-summary strong { font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 400; color: #f4f4f4; }
.status-summary small { margin-left: auto; color: var(--muted); font-size: 12px; }
.status-summary--online { border-left-color: #6ecf8a; }
.status-summary--offline { border-left-color: #ff7d64; }
.status-summary--mixed { border-left-color: var(--primary); }
.status-summary--online .server-status__dot, .status-login--online .server-status__dot, .status-realm--online .server-status__dot {
  background: #6ecf8a; box-shadow: 0 0 6px rgba(110,207,138,.7);
}
.status-summary--offline .server-status__dot, .status-login--offline .server-status__dot, .status-realm--offline .server-status__dot {
  background: #ff7d64; box-shadow: 0 0 6px rgba(255,125,100,.6);
}
.status-summary--mixed .server-status__dot { background: var(--primary); box-shadow: 0 0 6px rgba(239,202,114,.6); }
.status-state { margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.status-login--online .status-state, .status-realm--online .status-state { color: var(--ok); }
.status-login--offline .status-state, .status-realm--offline .status-state { color: var(--danger); }
.status-login { display: grid; gap: 6px; }
.status-login__head, .status-realm__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.status-login h2, .status-realm h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 400; color: #f4f4f4; }
.status-realm h2 { font-size: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-login .card-note { margin: 0 0 0 18px; }
.status-realms { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.status-realm { display: grid; gap: 14px; border-left: 3px solid #8a8a8a; }
.status-realm--online { border-left-color: #6ecf8a; }
.status-realm--offline { border-left-color: #ff7d64; }
.status-realm__live { margin: -6px 0 0 18px; color: var(--text-alt); font-size: 14px; line-height: 1.5; }
.status-realm > .card-note { margin: 0; }
.status-figures { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.status-figure {
  padding: 10px 12px;
  display: grid;
  gap: 2px;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  background: rgba(17,17,17,.55);
}
.status-figure strong { font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums; color: #f0f0f0; }
.status-figure span { color: var(--muted); font-size: 12px; }
.status-figure--ok strong { color: var(--ok); }
.status-figure--minor strong { color: var(--primary); }
.status-figure--major strong { color: var(--danger); }
.status-figure--none strong { color: var(--muted); }
.status-strip { display: grid; gap: 6px; }
.status-strip__bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; height: 38px; }
.status-day {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #3a3a3a;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
button.status-day:hover, button.status-day:focus-visible { filter: brightness(1.25); transform: scaleY(1.08); outline: none; box-shadow: 0 0 0 1px var(--primary-hi); }
.status-day--ok { background: #4fae6c; }
.status-day--minor { background: #d6a646; }
.status-day--major { background: #e0634c; }
.status-day--none { background: #333; }
.status-day--today { box-shadow: inset 0 -3px 0 rgba(255,255,255,.25); }
.status-strip__scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.status-strip__caption { margin: 0; min-height: 1.4em; color: var(--text-alt); font-size: 13px; }
.status-legend { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 12px; }
.status-legend li { display: inline-flex; align-items: center; gap: 6px; }
.status-legend .status-day { width: 10px; height: 10px; cursor: default; }
.status-realm__incidents { display: grid; gap: 8px; }
.status-realm__incidents h3 { margin: 0; color: #dedede; font-size: 13px; letter-spacing: .04em; }
.status-realm__incidents .card-note { margin: 0; }
.status-incidents { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.status-incident { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid #2c2c2c; font-size: 13px; color: var(--text-alt); }
.status-incident:first-child { border-top: 0; }
.status-incident strong { color: #e8e8e8; font-weight: 600; }
.status-incident__kind { flex: 0 0 76px; font-size: 10px; font-weight: 900; letter-spacing: .08em; color: var(--muted); }
.status-incident--outage .status-incident__kind { color: var(--primary); }
.status-incident--ongoing .status-incident__kind { color: var(--danger); }
.status-restarts summary { color: var(--primary); font-size: 13px; cursor: pointer; }
.status-restarts[open] summary { margin-bottom: 4px; }
.status-foot { margin: 0; line-height: 1.5; }
.status-foot a { color: var(--primary); }
@media (max-width: 900px) {
  .status-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .status-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-figure strong { font-size: 18px; }
  .status-strip__bars { gap: 2px; height: 32px; }
  .status-summary small { margin-left: 18px; flex-basis: 100%; }
  .status-figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .status-incident { gap: 8px; }
  .status-incident__kind { flex-basis: 58px; font-size: 9px; }
}

/* ---- V2.8: GM storage tab (#community/storage) ---- */
.storage-usage, .storage-backup { display: grid; gap: 16px; }
.storage-meters { margin: 0; padding: 0; list-style: none; }
.progress--warn .progress__fill { background: linear-gradient(90deg, #a85f1c, #f0a040); }
.progress--bad .progress__fill { background: linear-gradient(90deg, #a8321c, var(--danger)); }
.storage-alert { margin: 0; }
#gmCleanupForm[hidden] { display: none; }
.account-tabs:has(> .account-tab:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 600px) {
  .account-tabs:has(> .account-tab:nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
}

/* V2.8: item and spell database (/database, /items/{id}, /spells/{id}) */
.database-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.database-detail { display: grid; gap: 18px; }
.database-card { gap: 12px; }
.database-card .card-head h2 { min-width: 0; overflow-wrap: anywhere; }
.database-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.database-empty { color: var(--muted); font-size: 13px; }
.database-row {
  --class-color: transparent;
  padding: 6px 10px 6px 6px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-left: 3px solid var(--class-color);
  border-radius: 3px;
  color: inherit;
  background: rgba(255,255,255,.035);
  text-decoration: none;
  transition: background .15s ease;
}
.database-row:hover, .database-row:focus-visible { background: rgba(239,202,114,.08); }
.database-row--current { outline: 1px solid rgba(239,202,114,.45); background: rgba(239,202,114,.07); }
.database-row--talent { grid-template-columns: minmax(0, 1fr) auto; padding-left: 10px; }
.database-row--talent strong { color: var(--class-color); }
.database-row__text { min-width: 0; display: grid; gap: 2px; }
.database-row__text strong { overflow: hidden; color: #ececec; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.database-row__text small { overflow: hidden; color: var(--muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.database-row__id { color: #6f6f6f; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.database-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #4a4a4a;
  border-radius: 4px;
  background: #151515;
}
.database-icon img { width: 100%; height: 100%; display: block; }
.database-icon__letter { color: #8a8a8a; font-family: Georgia, "Times New Roman", serif; font-size: 16px; font-weight: 700; }
.database-icon--large { width: 58px; height: 58px; border-width: 2px; }
.database-icon--large .database-icon__letter { font-size: 26px; }
.database-head { display: flex; align-items: center; gap: 16px; }
.database-head h1 { overflow-wrap: anywhere; }
.database-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.database-layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.database-layout--single { grid-template-columns: minmax(0, 640px); }
.database-side { min-width: 0; display: grid; gap: 16px; }
.database-tooltip { position: static; width: auto; max-width: none; pointer-events: auto; box-shadow: none; }
.armory-tooltip__spell { color: inherit; text-decoration: underline; text-decoration-color: rgba(30,255,0,.4); text-underline-offset: 2px; }
.armory-tooltip__spell:hover { text-decoration-color: currentColor; }
.database-level { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.database-level input {
  width: 72px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #555;
  border-radius: 4px;
  color: #f1f1f1;
  background: #2a2a2a;
  font-size: 14px;
}
.database-level .secondary-button { height: 34px; margin-top: 0; padding: 0 14px; }
.database-level small { flex-basis: 100%; }
.database-description { margin: 0; color: #e2d9b8; font-size: 15px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.database-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.database-fact { padding: 8px 10px; border: 1px solid rgba(96,96,96,.45); border-radius: 4px; background: rgba(255,255,255,.03); }
.database-fact dt { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.database-fact dd { margin: 3px 0 0; color: #ececec; font-size: 14px; font-weight: 700; }

@media (max-width: 900px) {
  .database-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .database-head { align-items: flex-start; gap: 12px; }
  .database-icon--large { width: 46px; height: 46px; }
  .database-row__id { display: none; }
}

/* ---- V2.10: tracker statistics per GitHub label (/bugs/stats) ---- */
.tracker-main {
  --series-reports: #3987e5;
  --series-fixed: #199e70;
  --series-open: #c98500;
  --series-closed: #6f6e69;
  --chart-surface: #1c1c1c;
}
.tracker-card, .tracker-tiles { transition: opacity .2s ease; }
.tracker-main--loading .tracker-card, .tracker-main--loading .tracker-tiles { opacity: .6; }
.tracker-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; font-size: 14px; font-weight: 700; }
.tracker-links a { text-decoration: none; }
.tracker-links a:hover { text-decoration: underline; }
.tracker-links a[hidden] { display: none; }
.tracker-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tracker-tiles[hidden] { display: none; }
.tracker-tile strong { font-variant-numeric: normal; }
.tracker-tile span { color: var(--text-alt); font-weight: 700; }
.tracker-tile small { color: var(--muted); font-size: 12px; }
.tracker-card { position: relative; }
.tracker-card[hidden] { display: none; }
.tracker-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.tracker-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.tracker-sort select {
  height: 34px;
  max-width: 230px;
  padding: 0 8px;
  border: 1px solid #444;
  border-radius: 3px;
  color: var(--text);
  background: #1d1d1d;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.tracker-sort select:focus { outline: none; border-color: var(--primary); }
.tracker-legend { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--text-alt); font-size: 12px; }
.tracker-legend[hidden] { display: none; }
.tracker-legend li { display: inline-flex; align-items: center; gap: 7px; }
.tracker-key { width: 12px; height: 10px; flex: none; display: inline-block; border-radius: 2px; background: var(--series-reports); }
.tracker-key--line { width: 14px; height: 2px; border-radius: 1px; }
.tracker-key--reports, .tracker-key--reported { background: var(--series-reports); }
.tracker-key--fixes, .tracker-key--fixed { background: var(--series-fixed); }
.tracker-key--open { background: var(--series-open); }
.tracker-key--closed { background: var(--series-closed); }
.tracker-swatch {
  width: 12px;
  height: 12px;
  flex: none;
  display: inline-block;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: var(--swatch, #888);
}
.tracker-swatch--none { border-style: dashed; border-color: #777; background: transparent; }
.tracker-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.tracker-rows[hidden] { display: none; }
.tracker-row {
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 76px;
  align-items: center;
  gap: 14px;
  border: 0;
  border-radius: 3px;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.tracker-row:hover, .tracker-row:focus-visible { background: rgba(255,255,255,.045); }
.tracker-row:focus-visible { outline: 1px solid var(--primary-low); outline-offset: -1px; }
.tracker-row[aria-pressed="true"] { background: rgba(239,202,114,.08); box-shadow: inset 3px 0 0 var(--primary); }
.tracker-row--empty { opacity: .55; }
.tracker-row__label { min-width: 0; display: flex; align-items: center; gap: 9px; }
.tracker-row__text { min-width: 0; display: grid; gap: 1px; }
.tracker-row__name { overflow: hidden; color: var(--text); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.tracker-row__text small { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.tracker-row__bars { min-width: 0; display: grid; gap: 3px; }
.tracker-row__rate { display: grid; justify-items: end; gap: 1px; }
.tracker-row__rate strong { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.tracker-row__rate small { color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.tracker-bar { min-width: 0; display: flex; align-items: center; gap: 6px; }
.tracker-bar__fill {
  width: calc(var(--w, 0) * (100% - 58px));
  min-width: 2px;
  height: 8px;
  flex: none;
  border-radius: 0 4px 4px 0;
}
.tracker-bar__fill--zero { min-width: 0; width: 0; }
.tracker-bar__fill--reports { background: var(--series-reports); }
.tracker-bar__fill--fixes { background: var(--series-fixed); }
.tracker-bar__value { flex: none; color: var(--text-alt); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tracker-stack { width: calc(var(--w, 0) * (100% - 58px)); height: 12px; flex: none; display: flex; gap: 2px; }
.tracker-stack__segment { min-width: 2px; flex: var(--grow, 1) 1 0; }
.tracker-stack__segment:last-child { border-radius: 0 4px 4px 0; }
.tracker-stack__segment--fixed { background: var(--series-fixed); }
.tracker-stack__segment--open { background: var(--series-open); }
.tracker-stack__segment--closed { background: var(--series-closed); }
.tracker-row:hover .tracker-bar__fill, .tracker-row:hover .tracker-stack__segment { filter: brightness(1.18); }
.tracker-unlabeled { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text-alt); font-size: 13px; }
.tracker-unlabeled__button { padding: 0; border: 0; color: var(--primary); background: none; font: inherit; font-weight: 700; cursor: pointer; }
.tracker-unlabeled__button:hover, .tracker-unlabeled__button:focus-visible { color: var(--primary-hi); text-decoration: underline; }
.tracker-note { margin: 0; }
.tracker-tip {
  position: absolute;
  z-index: 5;
  min-width: 200px;
  max-width: 300px;
  padding: 9px 11px;
  display: grid;
  gap: 4px;
  border: 1px solid #4a4a4a;
  border-radius: 4px;
  background: rgba(18,18,18,.97);
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  font-size: 12px;
  pointer-events: none;
}
.tracker-tip[hidden] { display: none; }
.tracker-tip__title { color: var(--text-alt); font-size: 12px; font-weight: 700; }
.tracker-tip__description { color: var(--muted); font-size: 11px; }
.tracker-tip__row { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.tracker-tip__row strong { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
.tracker-tip__row--rate { padding-top: 3px; border-top: 1px solid #333; }
.tracker-table-wrap { overflow-x: auto; }
.tracker-table-wrap[hidden] { display: none; }
.tracker-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tracker-table th, .tracker-table td { padding: 7px 10px; border-bottom: 1px solid #2f2f2f; text-align: left; white-space: nowrap; }
.tracker-table thead th { color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.tracker-table tbody th { font-weight: 700; }
.tracker-table .tracker-table__number { text-align: right; font-variant-numeric: tabular-nums; }
.tracker-table__label { display: inline-flex; align-items: center; gap: 8px; }
.tracker-table__empty { opacity: .55; }
.tracker-table__none th { color: var(--text-alt); font-style: italic; }
.tracker-table tfoot th, .tracker-table tfoot td { border-bottom: 0; border-top: 1px solid #4a4a4a; color: var(--primary); font-weight: 800; }
.tracker-trend { min-height: 120px; }
.tracker-trend__svg:focus { outline: none; }
.tracker-trend__svg:focus-visible { outline: 1px solid var(--primary-low); outline-offset: 4px; }
.tracker-trend__base { stroke: #4a4a48; stroke-width: 1; }
.tracker-trend__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tracker-trend__line--reported { stroke: var(--series-reports); }
.tracker-trend__line--fixed { stroke: var(--series-fixed); }
.tracker-trend__cross { stroke: rgba(255,255,255,.28); stroke-width: 1; }
.tracker-trend__dot { stroke: var(--chart-surface); stroke-width: 2; }
.tracker-trend__dot--reported { fill: var(--series-reports); }
.tracker-trend__dot--fixed { fill: var(--series-fixed); }
.tracker-trend__readout { display: grid; gap: 3px; border-color: #4a4a4a; color: var(--text-alt); }
.tracker-trend__readout[hidden] { display: none; }
.tracker-trend + .history-facts dd { color: var(--text); }

@media (max-width: 900px) {
  .tracker-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .tracker-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tracker-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .tracker-row__bars { grid-column: 1 / -1; grid-row: 2; }
  .tracker-sort select { max-width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .tracker-card, .tracker-tiles { transition: none; }
}
@media (max-width: 520px) {
  .tracker-tile { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---- V2.11: contributors of the tracker repository (/bugs/stats#contributors) ---- */
.contributors-card { scroll-margin-top: 90px; }
.contributors-summary { margin: 0 0 12px; }
.contributors-table th, .contributors-table td { vertical-align: middle; }
.contributors-table thead th { padding: 0; }
.contributors-sort { width: 100%; padding: 9px 10px; border: 0; background: none; color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit; text-align: inherit; cursor: pointer; }
.contributors-sort:hover { color: var(--text); }
.contributors-sort:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.contributors-table th[aria-sort] .contributors-sort { color: var(--primary); }
.contributors-table th[aria-sort="descending"] .contributors-sort::after { content: " ↓"; }
.contributors-table th[aria-sort="ascending"] .contributors-sort::after { content: " ↑"; }
.contributors-table__rank { width: 1%; color: var(--muted); font-weight: 800; }
.contributors-table__rank--1 { color: #e2b13c; }
.contributors-table__rank--2 { color: #c3c7cc; }
.contributors-table__rank--3 { color: #c98a52; }
.contributors-table__zero { color: var(--muted); }
.contributors-table__active { color: var(--text-alt); }
.contributors-table__none { padding: 18px 10px; color: var(--muted); text-align: center !important; white-space: normal !important; }
.contributor { display: flex; align-items: center; gap: 10px; }
.contributor__mark { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; border: 1px solid #3a3a3a;
  border-radius: 50%; background: #262626; color: var(--text-alt); font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.contributor__name { font-weight: 800; }
a.contributor__name { color: var(--text); text-decoration: none; }
a.contributor__name:hover { color: var(--primary); text-decoration: underline; }
.contributors-table td.tracker-table__number { position: relative; }
.contributor__bar { position: absolute; top: 50%; right: 6px; width: calc((100% - 12px) * var(--w, 0)); height: 22px;
  border-radius: 4px; background: var(--series-reports, #3987e5); opacity: .22; transform: translateY(-50%); }
.contributor__value { position: relative; }
@media (max-width: 600px) {
  .contributors-table th, .contributors-table td { padding-left: 7px; padding-right: 7px; }
  .contributors-sort { padding: 8px 7px; }
  .contributor__mark { display: none; }
}

/* ---- V2.12: automatic changelog (/changelog) ---- */
.news-post__live { display: inline-flex; align-items: center; }
.news-post__live .live-dot { width: 6px; height: 6px; margin-right: 6px; vertical-align: 0; }

/* ---- V2.13: changes by class on /changelog ---- */
.news-classes { border: 1px solid var(--line-soft); border-radius: 4px; background: var(--panel); }
.news-classes[open] { border-color: var(--line); }
.news-classes__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 16px; color: var(--text); font-size: 12px; font-weight: 900; letter-spacing: .08em; cursor: pointer; list-style: none; }
.news-classes__summary::-webkit-details-marker { display: none; }
.news-classes__summary::before { content: "▸"; color: var(--primary); transition: transform .15s ease; }
.news-classes[open] > .news-classes__summary::before { transform: rotate(90deg); }
.news-classes__summary:hover, .news-classes__summary:focus-visible { color: var(--primary); }
.news-classes__summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.news-classes__summary small { flex: 1 1 260px; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.news-classes__count { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 10px; background: var(--primary); color: #1a1a1a; font-size: 11px; letter-spacing: 0; }
.news-classes__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 16px 14px; }
.class-filter-chip {
  --class-color: var(--primary);
  min-height: 32px;
  padding: 0 12px 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  color: var(--text-alt);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.class-filter-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--class-color); }
.class-filter-chip:hover { border-color: var(--class-color); color: var(--text); }
.class-filter-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.class-filter-chip[aria-pressed="true"] { border-color: var(--class-color); background: rgba(255,255,255,.09); color: var(--class-color); }
.class-filter-chip[aria-pressed="true"]::before { content: "✓"; width: auto; height: auto; background: none; color: var(--class-color); font-size: 12px; font-weight: 900; }
.news-classes__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 0 16px 6px; border-top: 1px solid var(--line-soft); }
.news-classes__tools[hidden] { display: none; }
.news-classes__clear { height: 34px; padding: 0 4px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .08em; cursor: pointer; }
.news-classes__clear:hover, .news-classes__clear:focus-visible { color: var(--primary); }
.news-classes__result { margin: 0; padding: 0 16px 12px; color: var(--text-alt); font-size: 13px; }
.news-classes__result:empty { display: none; }
.news-types .account-tab { display: inline-flex; align-items: center; gap: 7px; }
.news-types__count { min-width: 20px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.08); color: var(--text-alt); font-size: 11px; letter-spacing: 0; }
.news-types .account-tab[aria-pressed="true"] .news-types__count { background: rgba(239,202,114,.18); color: var(--primary); }

/* The class filter's list: one card per post, one row per change. */
.class-group { padding: 0; gap: 0; overflow: hidden; scroll-margin-top: 84px; }
.class-group__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 18px; border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,.025); }
.class-group__date { color: var(--primary); font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.class-group__title { min-width: 0; color: var(--text-alt); font-size: 14px; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.class-group__title::after { content: " →"; color: var(--muted); }
.class-group__title:hover, .class-group__title:focus-visible { color: var(--text); text-decoration: underline; }
.class-group__side { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.class-group__count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.class-rows { margin: 0; padding: 0; list-style: none; }
.class-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 11px 18px; }
.class-row + .class-row { border-top: 1px solid rgba(255,255,255,.06); }
.class-row:hover { background: rgba(255,255,255,.025); }
.type-badge { height: 22px; margin-top: 1px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.05); color: var(--text-alt); font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.type-badge--fix { border-color: rgba(25,158,112,.55); background: rgba(25,158,112,.14); color: #7fdcb6; }
.type-badge--new { border-color: rgba(57,135,229,.55); background: rgba(57,135,229,.14); color: #9fc6f4; }
.type-badge--perf { border-color: rgba(201,133,0,.55); background: rgba(201,133,0,.14); color: #f0c46a; }
.class-row__text { color: #dcdcdc; font-size: 14px; line-height: 1.55; }
.class-row__text > :first-child { margin-top: 0; }
.class-row__text > :last-child { margin-bottom: 0; }
.class-row__text p { margin: 0; overflow-wrap: anywhere; }
.class-row__text strong { color: var(--text); }
.class-row__classes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.class-row__issues { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 150px; }
.class-row__issue { padding: 1px 7px; border: 1px solid var(--line-soft); border-radius: 10px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
a.class-row__issue:hover, a.class-row__issue:focus-visible { border-color: var(--primary-low); color: var(--primary); }
.class-tag { --class-color: var(--primary); padding: 1px 8px; border: 1px solid var(--class-color); border-radius: 10px; color: var(--class-color); font-size: 11px; font-weight: 700; }
.talent-changes__all { justify-self: start; color: var(--primary); font-size: 13px; font-weight: 700; text-decoration: none; }
.talent-changes__all:hover, .talent-changes__all:focus-visible { color: var(--primary-hi); text-decoration: underline; }
@media (max-width: 520px) {
  .news-classes__chips { gap: 6px; padding: 2px 12px 12px; }
  .news-classes__summary { padding: 12px; }
  .news-classes__tools { padding: 0 12px 6px; }
  .news-classes__result { padding: 0 12px 12px; }
  .class-filter-chip { min-height: 30px; font-size: 12px; }
  .class-group__head { padding: 10px 14px; }
  .class-group__side { margin-left: 0; }
  .class-row { grid-template-columns: 60px minmax(0, 1fr); padding: 10px 14px; gap: 6px 10px; }
  .type-badge { letter-spacing: .06em; }
  .class-row__issues { grid-column: 2; justify-content: flex-start; max-width: none; }
  .news-types .account-tab { gap: 5px; padding: 0 8px; }
}

/* ---- V2.13: pages on /changelog (five posts per page) ---- */
.news-list { scroll-margin-top: 96px; }
.news-list:focus { outline: none; }
.news-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 26px; }
.news-pager[hidden] { display: none; }
.news-pager__page, .news-pager__step {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255,255,255,.03);
  color: var(--text-alt);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.news-pager__step { text-transform: uppercase; font-size: 12px; letter-spacing: .08em; }
a.news-pager__page:hover, a.news-pager__step:hover { border-color: var(--primary-low); color: var(--text); }
.news-pager a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.news-pager__page[aria-current="page"] { border-color: var(--primary); background: rgba(239,202,114,.12); color: var(--primary); }
.news-pager__step[aria-disabled="true"] { opacity: .4; }
.news-pager__arrow { font-size: 16px; line-height: 1; }
.news-pager__gap { min-width: 16px; color: var(--muted); text-align: center; }
@media (max-width: 520px) {
  .news-pager { gap: 4px; }
  .news-pager__page, .news-pager__step { min-width: 34px; height: 34px; padding: 0 8px; }
  .news-pager__word { display: none; }
}

/* ---- V2.14: roadmap (/roadmap, /roadmap/2026-W41, /roadmap/2026-10) ---- */
.roadmap-main { --metric-color: var(--series-fixed); }
.landing-news__links { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.roadmap-pace { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.roadmap-pace[hidden] { display: none; }
.roadmap-pace__tile { border-color: rgba(25,158,112,.4); background: linear-gradient(180deg, rgba(25,158,112,.1), rgba(255,255,255,.02)); }
.roadmap-pace__tile strong { color: var(--text); }
.roadmap-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
#roadmapChartCard[data-metric="fixed"] { --metric-color: var(--series-fixed); }
#roadmapChartCard[data-metric="reported"] { --metric-color: var(--series-reports); }
#roadmapChartCard[data-metric="commits"] { --metric-color: var(--primary-low); }
.roadmap-chart { min-height: 210px; }
.roadmap-chart[hidden] { display: none; }
.roadmap-chart__svg:focus { outline: none; }
.roadmap-chart__svg:focus-visible { outline: 1px solid var(--primary-low); outline-offset: 4px; }
.roadmap-chart__bar { fill: var(--metric-color); transition: opacity .15s ease; }
.roadmap-chart__bar--live { opacity: .55; }
.roadmap-chart__bar--active { opacity: 1; stroke: var(--text); stroke-width: 1; }
.roadmap-chart__line { fill: none; stroke: var(--metric-color); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.roadmap-chart__area { fill: var(--metric-color); opacity: .14; }
.roadmap-chart__dot { fill: var(--metric-color); stroke: var(--chart-surface); stroke-width: 2; }
.roadmap-key { background: var(--metric-color); }
#roadmapChartFacts dd { color: var(--text); }
.roadmap-table-wrap { max-height: 420px; overflow-y: auto; }
.roadmap-table__live { color: var(--muted); font-weight: 400; }

.roadmap-periods { display: grid; gap: 16px; }
.roadmap-periods:empty { display: none; }
.roadmap-period__head { align-items: flex-start; }
.roadmap-period__name { display: grid; gap: 3px; }
.roadmap-period__name h2 { margin: 0; }
.roadmap-period__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.roadmap-pill { font-size: 11px; }
.roadmap-facts { margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }
.roadmap-facts dd { color: var(--text); }
.roadmap-facts__detail { display: block; margin-top: 1px; color: var(--muted); font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 12px; }
.roadmap-period__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 22px; }
.roadmap-period__main { display: grid; gap: 10px; align-content: start; }
.roadmap-side { display: grid; gap: 18px; align-content: start; }
.roadmap-side__block { display: grid; gap: 8px; }
.ucp-card .roadmap-side__title { margin: 0; color: var(--muted); font-family: Inter, "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.roadmap-empty { margin: 0; color: var(--muted); font-size: 14px; }

.roadmap-highlights { display: grid; gap: 10px; }
.roadmap-highlights__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: highlight; }
.roadmap-highlight {
  position: relative;
  padding: 11px 14px 11px 44px;
  display: grid;
  gap: 5px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: rgba(255,255,255,.025);
  counter-increment: highlight;
}
.roadmap-highlight::before {
  content: counter(highlight);
  position: absolute;
  top: 11px;
  left: 12px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(239,202,114,.45);
  border-radius: 50%;
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
}
.roadmap-highlight__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.roadmap-highlight__title { color: var(--text); font-size: 15px; font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.roadmap-highlight__title:hover { color: var(--primary); text-decoration: underline; }
.roadmap-highlight__area { padding: 1px 7px; border: 1px solid var(--line-soft); border-radius: 10px; color: var(--text-alt); font-size: 11px; font-weight: 700; }
.roadmap-highlight__summary { margin: 0; color: var(--text-alt); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.roadmap-highlight__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: 12px; }
.roadmap-highlight__post { margin-right: 4px; }
.roadmap-issue { padding: 0 6px; border: 1px solid var(--line-soft); border-radius: 3px; color: var(--text-alt); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; }
a.roadmap-issue:hover { border-color: var(--primary-low); color: var(--primary); }
.roadmap-issue--more { color: var(--muted); }
.roadmap-more { justify-self: start; }

.roadmap-spark { margin: 0; padding: 0; list-style: none; height: 64px; display: flex; align-items: flex-end; gap: 2px; }
.roadmap-spark--week { height: 78px; gap: 6px; }
.roadmap-spark__day { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 3px; }
.roadmap-spark__bar { --h: 0; display: block; height: max(2px, calc(var(--h) * 100%)); border-radius: 2px 2px 0 0; background: var(--series-fixed); }
.roadmap-spark--week .roadmap-spark__bar { height: max(2px, calc(var(--h) * (100% - 16px))); }
.roadmap-spark__day--future .roadmap-spark__bar { background: #333; }
.roadmap-spark__name { color: var(--muted); font-size: 10px; text-align: center; line-height: 13px; }
.roadmap-classes { display: flex; flex-wrap: wrap; gap: 6px; }
.roadmap-class { min-height: 28px; padding: 0 9px 0 8px; gap: 6px; font-size: 12px; text-decoration: none; }
.roadmap-class__count { color: var(--muted); font-variant-numeric: tabular-nums; }
.roadmap-people { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.roadmap-person { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 13px; }
.roadmap-person__name { color: var(--text); font-weight: 700; text-decoration: none; }
a.roadmap-person__name:hover { color: var(--primary); text-decoration: underline; }
.roadmap-person small { color: var(--muted); }
.roadmap-nav { display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line-soft); }

.roadmap-timeline { margin: 0 0 0 6px; padding: 0 0 0 18px; list-style: none; display: grid; gap: 18px; border-left: 2px solid var(--line-soft); }
.roadmap-timeline__month { position: relative; display: grid; gap: 6px; }
.roadmap-timeline__month::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -26px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--primary-low);
  border-radius: 50%;
  background: #1c1c1c;
}
.roadmap-timeline__month--live::before { border-color: var(--ok); background: var(--ok); }
.roadmap-timeline__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.roadmap-timeline__name { color: var(--primary); font-family: Georgia, "Times New Roman", serif; font-size: 19px; text-decoration: none; }
.roadmap-timeline__name:hover { text-decoration: underline; }
.roadmap-timeline__numbers { margin: 0; color: var(--muted); font-size: 13px; }
.roadmap-timeline__list { margin: 0; padding-left: 18px; display: grid; gap: 3px; color: var(--text-alt); font-size: 14px; }
.roadmap-timeline__list a { color: var(--text); text-decoration: none; }
.roadmap-timeline__list a:hover { color: var(--primary); text-decoration: underline; }
.roadmap-timeline__more { color: var(--primary); font-size: 13px; text-decoration: none; }

.roadmap-archive { margin: 0; padding: 0; list-style: none; display: grid; }
.roadmap-archive__row {
  padding: 10px 6px;
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) 96px 48px;
  align-items: center;
  gap: 6px 16px;
  border-bottom: 1px solid #2f2f2f;
  color: var(--text-alt);
  text-decoration: none;
}
.roadmap-archive__row:hover, .roadmap-archive__row:focus-visible { background: rgba(255,255,255,.04); }
.roadmap-archive__row--current { background: rgba(239,202,114,.07); box-shadow: inset 3px 0 0 var(--primary); }
.roadmap-archive__name { display: grid; gap: 1px; }
.roadmap-archive__name strong { color: var(--text); font-size: 14px; }
.roadmap-archive__name small, .roadmap-archive__numbers small { color: var(--muted); font-size: 12px; }
.roadmap-archive__top { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.roadmap-archive__top--none { color: var(--muted); font-style: italic; }
.roadmap-archive__row .roadmap-pill { justify-self: end; }
.roadmap-archive__numbers { grid-column: 3; display: inline-flex; align-items: baseline; gap: 5px; justify-content: flex-end; min-width: 70px; }
.roadmap-archive__numbers strong { color: var(--text); font-size: 16px; font-variant-numeric: tabular-nums; }
.roadmap-archive + .tracker-note { margin: 0; }

@media (max-width: 900px) {
  .roadmap-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .roadmap-pace { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roadmap-period__body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .roadmap-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roadmap-archive__row { grid-template-columns: minmax(0, 1fr) auto; }
  .roadmap-archive__top { grid-column: 1 / -1; grid-row: 2; }
  .roadmap-archive__numbers { grid-column: 2; grid-row: 1; }
  .roadmap-archive__row .roadmap-pill { grid-column: 2; grid-row: 2; justify-self: end; }
  .roadmap-archive__row:has(.roadmap-pill) .roadmap-archive__top { grid-column: 1; }
  .roadmap-highlight { padding-left: 40px; }
  .roadmap-highlight::before { left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .roadmap-chart__bar { transition: none; }
}
/* The ROADMAP tab on /changelog and the changelog tabs on /roadmap. */
.news-filter .news-filter__link { display: inline-flex; align-items: center; text-decoration: none; }
.news-filter .news-filter__link[aria-current="page"] { color: var(--primary); border-bottom-color: var(--primary); }
.roadmap-main > .news-filter { margin-top: -4px; }
@media (max-width: 600px) {
  .news-filter { flex-wrap: wrap; }
  .news-filter .account-tab { padding: 0 9px; }
}

/* ---- V2.15: Known Bugs also lists the GitHub tracker ---- */
.bugs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bugs-stat__detail { color: var(--text-alt); font-size: 11px; }
.bugs-tools .bugs-filter + .bugs-filter { margin-right: auto; }
.bug-source {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid #555;
  border-radius: 3px;
  color: #cfcfcf;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 16px;
}
.bug-source--github { border-color: rgba(57,135,229,.6); color: #8dbcf2; }
.bug-labels { display: flex; flex-wrap: wrap; gap: 4px; }
.bug-label {
  padding: 1px 7px;
  border: 1px solid #444;
  border-radius: 9px;
  color: var(--text-alt);
  background: #1d1d1d;
  font-size: 11px;
}
.known-bug__thumbs { color: var(--primary); font-weight: 700; }
.known-bug__links { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.bugs-more { justify-self: center; height: 34px; padding: 0 16px; font-size: 11px; }
@media (max-width: 900px) {
  .bugs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bugs-tools .bugs-filter + .bugs-filter { margin-right: 0; }
}
@media (max-width: 520px) {
  .bugs-stats { grid-template-columns: minmax(0, 1fr); }
  .bugs-stat__detail { grid-column: 1 / -1; }
}

/* ---- V2.16: Wildcard and Warcraft Reborn labels on /changelog (V2.17: Area 52, Freepick, Hero; V2.18: Conquest of Azeroth) ---- */
:root {
  --realm-coa: #8fd0ff;
  --realm-wildcard: #b48cff;
  --realm-reborn: #ff8f5a;
  --realm-area52: #34d399;
  --realm-freepick: #f0dc4e;
  --realm-hero: #ff4f9a;
}
.news-realms { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.news-realms[hidden] { display: none; }
.news-realms__label { color: var(--text); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.news-realms small { flex: 1 1 200px; color: var(--muted); font-size: 12px; }
.realm-filter--coa { --class-color: var(--realm-coa); }
.realm-filter--wildcard { --class-color: var(--realm-wildcard); }
.realm-filter--reborn { --class-color: var(--realm-reborn); }
.realm-filter--area52 { --class-color: var(--realm-area52); }
.realm-filter--freepick { --class-color: var(--realm-freepick); }
.realm-filter--hero { --class-color: var(--realm-hero); }
.realm-filter[hidden] { display: none; }
.realm-filter .news-types__count { margin-left: 2px; }
.realm-filter[aria-pressed="true"] .news-types__count { background: rgba(255,255,255,.12); color: var(--class-color); }
.news-filter-tools { display: grid; gap: 10px; }
.news-filter-tools[hidden] { display: none; }
.news-filter-tools .news-classes__result { padding: 0; }
.news-classes__tools { justify-content: flex-end; }
.realm-tag {
  --realm-line: var(--line);
  --realm-fill: rgba(255,255,255,.05);
  --realm-ink: var(--text-alt);
  height: 20px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--realm-line);
  border-radius: 10px;
  background: var(--realm-fill);
  color: var(--realm-ink);
  font: inherit;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 1px;
}
.realm-tag--coa { --realm-line: rgba(143,208,255,.55); --realm-fill: rgba(143,208,255,.13); --realm-ink: #b5e1ff; }
.realm-tag--wildcard { --realm-line: rgba(180,140,255,.55); --realm-fill: rgba(180,140,255,.14); --realm-ink: #cdb1ff; }
.realm-tag--reborn { --realm-line: rgba(255,143,90,.55); --realm-fill: rgba(255,143,90,.13); --realm-ink: #ffab84; }
.realm-tag--area52 { --realm-line: rgba(52,211,153,.55); --realm-fill: rgba(52,211,153,.12); --realm-ink: #7ee6bf; }
.realm-tag--freepick { --realm-line: rgba(240,220,78,.5); --realm-fill: rgba(240,220,78,.1); --realm-ink: #f5e78a; }
.realm-tag--hero { --realm-line: rgba(255,79,154,.55); --realm-fill: rgba(255,79,154,.13); --realm-ink: #ff8dbd; }
.news-post__body li > .realm-tag, .news-post__body p > .realm-tag { margin-left: 8px; }
button.realm-tag { cursor: pointer; transition: filter .15s ease; }
button.realm-tag:hover { filter: brightness(1.3); }
button.realm-tag:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.realm-tag__count { padding-left: 6px; border-left: 1px solid var(--realm-line); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.md-body .realm-heading { padding-left: 10px; border-left: 3px solid var(--realm-color); }
.realm-heading--wildcard { --realm-color: var(--realm-wildcard); }
.realm-heading--reborn { --realm-color: var(--realm-reborn); }
.realm-heading--area52 { --realm-color: var(--realm-area52); }
.realm-heading--freepick { --realm-color: var(--realm-freepick); }
.realm-heading--hero { --realm-color: var(--realm-hero); }

/* V2.21: Groot Coins (panel and the Top testers board) */
.coin-stats { margin-bottom: 14px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.ucp-card .coin-stats { margin: 12px 0 14px; }
.coin-lookup { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: end; }
.coin-lookup .secondary-button { height: 40px; }
.coin-award { margin-top: 12px; padding-top: 14px; border-top: 1px solid #2e2e2e; }
.coin-target { display: grid; gap: 3px; }
.coin-target strong { color: #e4e4e4; font-size: 14px; overflow-wrap: anywhere; }
.coin-earlier { margin-top: 6px; }
.coin-earlier:empty { display: none; }
.coin-earlier__head { padding-bottom: 8px; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.coin-earlier__head + .report { border-top: 0; padding-top: 0; }
.coin-amount {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid var(--coin-line);
  border-radius: 10px;
  color: var(--coin-ink);
  background: var(--coin-fill);
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.coin-amount--in { --coin-line: rgba(239,202,114,.5); --coin-fill: rgba(239,202,114,.1); --coin-ink: var(--primary-hi); }
.coin-amount--out { --coin-line: #555; --coin-fill: rgba(255,255,255,.03); --coin-ink: var(--text-alt); }
.coin-amount--wait { --coin-line: rgba(239,202,114,.35); --coin-fill: transparent; --coin-ink: var(--primary); border-style: dashed; }
.coin-row > .link-button { justify-self: start; }
.coin-error { color: var(--danger); }
.coin-done { color: var(--ok); }
.bugs-testers #bugsBoards { justify-self: start; }
.board-entry__value--coins strong { color: var(--primary-hi); }
@media (max-width: 560px) {
  .coin-lookup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .coin-lookup .secondary-button { grid-column: 1 / -1; }
}
.coin-column { display: grid; gap: 20px; align-content: start; min-width: 0; }
.account-tabs:has(> .account-tab:nth-child(5):not([hidden])) { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) {
  .account-tabs:has(> .account-tab:nth-child(5):not([hidden])) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .account-tabs:has(> .account-tab:nth-child(5):not([hidden])) { grid-template-columns: repeat(2, 1fr); }
}

/* V2.22: remember this browser for two-factor log-in */
.remember-box { padding-top: 14px; display: grid; gap: 11px; border-top: 1px solid var(--line-soft); }
.remember-box .card-head h3 { margin: 0; }
.remember-box .form-note { margin: 0; }
#twoFactorRememberRow { margin: 2px 0 0; }
#twoFactorRememberRow strong { color: #d5d5d5; font-weight: 700; }

/* V2.25: Groot Coins on the GM Bug reports list (tick and award many, automatic awards, award inside a report) */
.bug-coins { margin: 12px 0 14px; display: grid; gap: 10px; }
.bug-auto { border: 1px solid var(--line-soft); border-radius: 4px; background: rgba(255,255,255,.015); }
.bug-auto > summary {
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  cursor: pointer;
}
.bug-auto > summary::-webkit-details-marker { display: none; }
.bug-auto__title { color: var(--primary); font-size: 11px; font-weight: 900; letter-spacing: .09em; }
.bug-auto__title::before { content: "\25B8"; display: inline-block; width: 14px; }
.bug-auto[open] .bug-auto__title::before { content: "\25BE"; }
.bug-auto__form { padding: 2px 12px 12px; }
.bug-auto__form strong { color: #d5d5d5; font-weight: 700; }
.bug-auto__amount { max-width: 220px; }
.bug-auto .form-note:empty { display: none; }
.bug-bulk {
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
}
.bug-bulk[hidden] { display: none; }
.bug-bulk__all { margin: 0; align-items: center; color: #cfcfcf; }
.bug-bulk__all input { margin: 0; }
.bug-bulk__count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.bug-bulk__amount { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.bug-bulk__amount span { color: #cfcfcf; font-size: 11px; font-weight: 800; letter-spacing: .055em; white-space: nowrap; }
.bug-bulk__amount input { width: 72px; }
#gmBugBulkAward:disabled { cursor: default; }
.report__head--pick { justify-content: flex-start; align-items: center; }
.report__head--pick strong { flex: 1 1 auto; }
.bug-pick { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--primary-low); cursor: pointer; }
.bug-pick:disabled { cursor: not-allowed; opacity: .45; }
.bug-coin { display: contents; }
.coin-inline { margin-top: 2px; }
.coin-inline__fields { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 11px; }
@media (max-width: 560px) {
  .bug-bulk__amount { margin-left: 0; }
  .coin-inline__fields { grid-template-columns: minmax(0, 1fr); }
  .report__head--pick { flex-wrap: wrap; }
  .report__head--pick strong { flex-basis: calc(100% - 30px); }
}

/* V2.26: Armory compare (/armory/compare/A/B). The higher value carries a "▲ +N" note, not only a colour. */
a.secondary-button { display: inline-flex; align-items: center; text-decoration: none; }
.armory-compare-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #2e2e2e;
  border-radius: 4px;
  background: rgba(0,0,0,.25);
}
.armory-compare-form[hidden] { display: none; }
.armory-compare-form > label:not(.visually-hidden) { color: #cfcfcf; font-size: 13px; font-weight: 700; }
.armory-compare-form input {
  min-width: 0;
  height: 38px;
  flex: 1 1 140px;
  padding: 0 10px;
  border: 1px solid #555;
  border-radius: 4px;
  outline: none;
  color: #f1f1f1;
  background: #2a2a2a;
  font-size: 14px;
}
.armory-compare-form input::placeholder { color: #838383; }
.armory-compare-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(239,202,114,.13); }
.armory-compare-form .primary-button { height: 38px; margin-top: 0; padding: 0 18px; font-size: 14px; }
.armory-compare-form__vs { color: #777; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.armory-compare-form__note { flex-basis: 100%; color: var(--danger); font-size: 12px; }
.armory-compare-form__note:empty { display: none; }

.armory-vs-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.armory-vs-head__vs { color: var(--primary); font-family: Georgia, "Times New Roman", serif; font-size: 22px; font-weight: 900; letter-spacing: .08em; }
.armory-vs-side { --class-color: var(--primary); min-width: 0; display: flex; align-items: center; gap: 14px; }
.armory-vs-side--b { flex-direction: row-reverse; text-align: right; }
.armory-vs-side .character-card__emblem { width: 52px; height: 52px; font-size: 23px; }
.armory-vs-side__text { min-width: 0; }
.armory-vs-side__name { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 26px; line-height: 1.15; overflow-wrap: anywhere; }
.armory-vs-side__name a { color: var(--class-color); text-decoration: none; }
.armory-vs-side__name a:hover, .armory-vs-side__name a:focus-visible { text-decoration: underline; }
.armory-vs-side p { margin: 4px 0 0; color: #a5a5a5; font-size: 13px; }
.armory-vs-side p a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.35); }
.armory-vs-side p a:hover, .armory-vs-side p a:focus-visible { color: var(--primary); border-bottom-color: var(--primary); }
.armory-vs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.armory-vs-row {
  padding: 6px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.armory-vs-row + .armory-vs-row { border-top: 1px solid #2a2a2a; }
.armory-vs-row__label { color: #9a9a9a; text-align: center; }
.armory-vs-row__value { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.armory-vs-row__value--a { flex-direction: row-reverse; }
.armory-vs-row__value strong { color: #dcdcdc; font-variant-numeric: tabular-nums; }
.armory-vs-row__value.is-higher strong { color: var(--ok); }
.armory-vs-diff { color: var(--ok); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.armory-vs-row--names { padding-top: 0; }
.armory-vs-row--names strong { overflow: hidden; color: #8a8a8a; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.armory-vs-row--names strong:first-child { text-align: right; }
.armory-vs-row--names h3 { margin: 0; color: var(--primary); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-align: center; text-transform: uppercase; }
.armory-vs-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; }
.armory-vs-stats__note { margin: 0 0 10px; }

.armory-gear-row { padding: 2px 0; display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); align-items: center; gap: 8px; }
.armory-gear-row + .armory-gear-row { border-top: 1px solid #262626; }
.armory-gear-row--head { padding-bottom: 6px; }
.armory-gear-row--head strong { overflow: hidden; color: #cfcfcf; font-family: Georgia, "Times New Roman", serif; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.armory-gear-row--head strong:last-child { text-align: right; }
.armory-gear-row__slot { display: grid; justify-items: center; gap: 2px; text-align: center; }
.armory-gear-row__slot span { color: #8a8a8a; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.armory-gear-row__diff { color: #8a8a8a; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.armory-gear-row__diff--a, .armory-gear-row__diff--b { color: var(--ok); }
.armory-gear .armory-slot--right { flex-direction: row-reverse; text-align: right; }

@media (max-width: 900px) {
  .armory-vs-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .armory-vs-head { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .armory-vs-head__vs { justify-self: center; font-size: 16px; }
  .armory-vs-side--b { flex-direction: row; text-align: left; }
  .armory-vs-side__name { font-size: 22px; }
  .armory-vs-row { grid-template-columns: minmax(0, 1fr) minmax(74px, auto) minmax(0, 1fr); gap: 6px; }
  .armory-gear-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; padding: 4px 0; }
  .armory-gear-row__slot { grid-column: 1 / -1; order: -1; display: flex; justify-content: center; gap: 8px; }
  .armory-gear-row--head > span { display: none; }
  .armory-gear .armory-slot { gap: 8px; padding: 4px 2px; }
  .armory-gear .armory-slot__icon { width: 36px; height: 36px; }
  .armory-gear .armory-slot--right { flex-direction: row-reverse; text-align: right; }
}

/* V2.26: Groot Coin shop (/shop). Read only: what the in-game Ethereal Bazaar sells, priced in coins and tokens. */
.shop-main { width: 100%; max-width: 1100px; margin: 0 auto; display: grid; gap: 16px; }
.shop-main > .ucp-head { display: grid; gap: 10px; }
.shop-main a { color: var(--primary); }
.shop-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; counter-reset: shop-step; }
.shop-steps li {
  padding: 12px 14px 12px 50px;
  position: relative;
  display: grid;
  align-content: start;
  gap: 4px;
  border: 1px solid rgba(96,96,96,.5);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(35,35,35,.92), rgba(24,24,24,.95));
  counter-increment: shop-step;
}
.shop-steps li::before {
  content: counter(shop-step);
  width: 26px;
  height: 26px;
  position: absolute;
  top: 12px;
  left: 14px;
  display: grid;
  place-items: center;
  border: 1px solid var(--primary-low);
  border-radius: 50%;
  color: var(--primary);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 700;
}
.shop-steps strong { color: #ececec; font-size: 14px; }
.shop-steps span { color: var(--text-alt); font-size: 13px; line-height: 1.5; }
.shop-body { display: grid; gap: 14px; }
.shop-body[hidden] { display: none; }
.shop-budget { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.shop-budget__field { display: flex; align-items: center; gap: 10px; }
.shop-budget__field label { color: #ececec; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.shop-budget__field input {
  width: 96px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--primary-low);
  border-radius: 3px;
  color: var(--primary);
  background: #1b1b1b;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.shop-budget__field input:focus { outline: none; border-color: var(--primary); }
.shop-budget .card-note { flex: 1 1 260px; margin: 0; }
.shop-check { display: inline-flex; align-items: center; gap: 8px; color: var(--text-alt); font-size: 13px; cursor: pointer; }
.shop-check input { width: 16px; height: 16px; accent-color: var(--primary); }
.shop-rotation { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--text-alt); font-size: 13px; }
.shop-rotation:empty { display: none; }
.shop-rotation strong { color: #ececec; }
.shop-rotation time { color: var(--muted); }
.shop-rotation__dot { width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #b9a6ff; box-shadow: 0 0 8px rgba(185,166,255,.6); }
.shop-lists__count { margin-left: 6px; opacity: .7; font-variant-numeric: tabular-nums; }
.shop-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.shop-sort select { height: 38px; padding: 0 10px; border: 1px solid #444; border-radius: 3px; color: var(--text); background: #1b1b1b; font: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; }
.shop-sort select:focus { outline: none; border-color: var(--primary); }
.shop-card { display: grid; gap: 12px; }
.shop-card > .card-note { margin: 0; }
.shop-items { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 6px; }
.shop-item {
  padding: 6px 10px 6px 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  border-radius: 3px;
  background: rgba(255,255,255,.035);
}
.shop-item--rotating { box-shadow: inset 3px 0 0 #b9a6ff; }
.shop-item__link { min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.shop-main .shop-item__link { color: inherit; }
.shop-item__link:hover strong, .shop-item__link:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
.shop-item__text { min-width: 0; display: grid; gap: 2px; }
.shop-item__text strong { overflow: hidden; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.shop-item__text small { display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.shop-item__price { display: grid; justify-items: end; gap: 1px; white-space: nowrap; }
.shop-coins { color: var(--primary); font-size: 14px; font-variant-numeric: tabular-nums; }
.shop-item__price small { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.shop-item__marks { grid-column: 1 / -1; padding-left: 44px; display: flex; flex-wrap: wrap; gap: 4px; }
.shop-tag { padding: 2px 7px; border: 1px solid #4a4a4a; border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.shop-tag--reach { border-color: rgba(169,231,187,.5); color: var(--ok); }
.shop-tag--reach::before { content: "✓ "; }
.shop-foot { margin: 0; }
.coin-shop { margin: 0 0 12px; padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; border: 1px solid rgba(239,202,114,.25); border-radius: 4px; color: var(--text-alt); background: rgba(239,202,114,.05); font-size: 13px; }
.coin-shop[hidden] { display: none; }
.coin-shop .news-link { margin: 0; }
.bugs-testers .card-note a { color: var(--primary); white-space: nowrap; }

@media (max-width: 900px) {
  .shop-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .shop-tools { align-items: stretch; }
  .shop-tools .bugs-search, .shop-sort { flex: 1 1 100%; }
  .shop-sort select { flex: 1 1 auto; }
  .shop-lists .bugs-filter__button { height: 30px; padding: 0 10px; font-size: 10px; }
}