/* wowForever — layout ispirato a blizzard.com / Battle.net */
:root {
  --bg: #15171e;
  --bg-deep: #0b0c10;
  --bg-elev: #1c1f27;
  --bg-card: #23262f;
  --ink: #ffffff;
  --muted: #a0a3a8;
  --muted-2: #6d7078;
  --blue: #0074e0;
  --blue-hot: #00aeff;
  --blue-press: #005bb5;
  --ok: #00c853;
  --ko: #ff5252;
  --line: rgba(255, 255, 255, 0.08);
  --page: clamp(16px, 3.2vw, 48px);
  --content: 1560px;
  --font: "Open Sans", "Segoe UI", sans-serif;
  --display: "Barlow", "Switzer", "Segoe UI", sans-serif;
  --brand: "Barlow", "Switzer", "Segoe UI", sans-serif;
  --gold: #f0d078;
  --gold-deep: #a67c1a;
  --radius: 2px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100svh;
  background: #0c0e14;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: var(--blue-hot); text-decoration: none; }
a:hover { color: #7fd4ff; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue-hot); outline-offset: 2px; }
::selection { background: var(--blue); color: #fff; }

/* —— Scrollbars (site chrome) —— */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 162, 39, 0.55) rgba(12, 14, 20, 0.9);
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: rgba(8, 10, 14, 0.95);
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(240, 208, 112, 0.65), rgba(166, 124, 26, 0.6));
  border: 2px solid rgba(8, 10, 14, 0.95);
  border-radius: 999px;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(240, 208, 112, 0.9), rgba(201, 162, 39, 0.8));
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 162, 39, 0.5) rgba(255, 255, 255, 0.04);
}
*::-webkit-scrollbar-corner { background: transparent; }

.icon { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.15em; }

/* —— Nav (Forever top bar: fixed, inset like blz-nav) —— */
.shell-top {
  position: fixed;
  /* Same clearance as L2 Ironclad safe-top: keep the bar below the iOS status bar / Dynamic Island. */
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 16px;
  right: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 72px;
  max-width: calc(2600px - 32px);
  margin-inline: auto;
  padding: 0 12px 0 0;
  border-radius: 8px;
  background: rgba(14, 18, 24, 0.88);
  border: 1px solid rgba(240, 208, 120, 0.08); /* taste-skill-ignore */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.42);
  overflow: visible;
}
.shell-top.has-dd-open {
  z-index: 120;
}
.shell-top--forever {
  gap: 22px;
}
/* Logo bay — matches DM/mail panel charcoal */
.shell-brand-cluster {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-shrink: 0;
  align-self: stretch;
  height: 72px;
  margin: 0;
  padding: 0 26px 0 18px;
  overflow: visible;
  border-radius: 8px 0 0 8px;
  background: #0b0e14;
  background: linear-gradient(180deg, #171c26 0%, #0b0e14 100%);
  box-shadow:
    inset -1px 0 0 rgba(240, 208, 120, 0.12),
    4px 0 18px rgba(0, 0, 0, 0.35);
  position: relative;
  z-index: 1;
}
.shell-brand-cluster::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 8%,
    rgba(240, 208, 120, 0.22) 50%,
    transparent 92%
  );
  pointer-events: none;
}
.shell-game-logo {
  display: flex;
  align-items: center;
  height: 92px;
  margin-top: -10px;
  margin-bottom: -10px;
  text-decoration: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45));
}
.shell-game-logo img {
  display: block;
  height: 92px;
  width: auto;
  max-width: min(220px, 28vw);
  object-fit: contain;
}
.shell-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 1;
}
.shell-brand:hover { text-decoration: none; }
.shell-brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
}
.shell-brand-mark img,
.shell-brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.shell-brand-word {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
  font-family: var(--brand);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.shell-brand-wow {
  letter-spacing: 0.02em;
  font-weight: 700;
}
.shell-brand-forever {
  color: var(--blue-hot);
  letter-spacing: 0.14em;
  font-weight: 600;
  font-size: 0.88em;
}
.shell-brand:hover .shell-brand-forever { color: #7fd4ff; }
@media (max-width: 1100px) {
  .shell-top {
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 10px;
    right: 10px;
    height: 64px;
    padding: 0 10px 0 0;
  }
  .shell-brand-cluster {
    height: 64px;
    padding: 0 16px 0 12px;
  }
  .shell-game-logo {
    height: 72px;
    margin-top: -4px;
    margin-bottom: -4px;
  }
  .shell-game-logo img {
    height: 68px;
    max-width: min(170px, 42vw);
  }
}
@media (max-width: 720px) {
  .shell-top {
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: 8px;
    right: 8px;
    height: 58px;
    border-radius: 6px;
  }
  .shell-brand-word { font-size: 15px; gap: 0.24em; }
  .shell-brand-mark { width: 36px; height: 36px; }
  .shell-brand-cluster {
    height: 58px;
    padding: 0 12px 0 10px;
    border-radius: 6px 0 0 6px;
  }
  .shell-game-logo {
    height: 58px;
    margin-top: 0;
    margin-bottom: 0;
  }
  .shell-game-logo img {
    height: 56px;
    max-width: min(168px, 46vw);
  }
}
.shell-status {
  display: none;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 40px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14); /* taste-skill-ignore */
  background: rgba(8, 10, 14, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  line-height: 1.1;
  text-decoration: none;
  color: inherit;
}
.nav-drawer-status .shell-status {
  display: inline-flex;
}
.shell-status:hover {
  text-decoration: none;
  border-color: rgba(240, 208, 120, 0.28); /* taste-skill-ignore */
}
.shell-mobile-end,
.shell-mobile-nav {
  display: none;
}
.shell-status-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted-2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
.shell-status[data-online="yes"] {
  border-color: rgba(0, 200, 83, 0.45); /* taste-skill-ignore */
  background: linear-gradient(180deg, rgba(0, 200, 83, 0.16), rgba(8, 10, 14, 0.78));
}
.shell-status[data-online="yes"] .shell-status-pip {
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(0, 200, 83, 0.2);
  animation: live-pulse 1.8s ease-out infinite;
}
.shell-status[data-online="no"] {
  border-color: rgba(255, 82, 82, 0.45); /* taste-skill-ignore */
  background: linear-gradient(180deg, rgba(255, 82, 82, 0.14), rgba(8, 10, 14, 0.78));
}
.shell-status[data-online="no"] .shell-status-pip { background: var(--ko); }
.shell-status-copy {
  display: grid;
  gap: 2px;
}
.shell-status-realm {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.shell-status-state {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.shell-status[data-online="yes"] .shell-status-state { color: #7dffb0; }
.shell-status[data-online="no"] .shell-status-state { color: #ff8e8e; }
.nav-drawer-status {
  padding: 4px 0 14px;
  border-bottom: 1px solid var(--line); /* taste-skill-ignore */
  margin-bottom: 8px;
}
.nav-drawer-status .shell-status { width: 100%; }

.shell-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px 22px;
  flex: 1;
  min-width: 0;
  overflow: visible;
}

.shell-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.shell-nav .icon {
  width: 1.05em;
  height: 1.05em;
  color: var(--gold, #e8c04a);
  flex: none;
}
.nav-drawer-links a {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-drawer-links a .icon {
  width: 0.72em;
  height: 0.72em;
  color: var(--gold, #e8c04a);
  flex: none;
}
.shell-nav { gap: 4px 16px; }

.shell-nav a {
  color: rgba(255, 255, 255, 0.68);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.shell-nav a:hover {
  color: #fff;
}
.shell-nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--gold);
}
.shell-dd {
  position: relative;
  display: flex;
  align-items: center;
}
.shell-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.shell-dd-btn:hover,
.shell-dd.is-open .shell-dd-btn,
.shell-dd.is-active .shell-dd-btn {
  color: #fff;
}
.shell-dd.is-active .shell-dd-btn {
  border-bottom-color: var(--gold);
}
.shell-dd-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.72;
  transition: transform 160ms ease;
}
.shell-dd.is-open .shell-dd-caret {
  transform: rotate(180deg);
}
.shell-dd-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 80;
  min-width: 180px;
  padding: 8px;
  display: grid;
  gap: 2px;
  border-radius: 6px;
  border: 1px solid rgba(240, 208, 120, 0.18); /* taste-skill-ignore */
  background: linear-gradient(180deg, #171b24, #0e1218);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  transform: translateY(-6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 160ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 160ms;
}
.shell-dd.is-open .shell-dd-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}
.shell-dd-menu a {
  display: block;
  padding: 9px 12px 9px 11px;
  border: 0;
  border-bottom: 0;
  border-left: 2px solid transparent;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.shell-dd-menu a:hover {
  color: #fff;
  background: rgba(240, 208, 120, 0.06); /* taste-skill-ignore */
  border-left-color: rgba(240, 208, 120, 0.45); /* taste-skill-ignore */
}
.shell-dd-menu a[aria-current="page"] {
  color: var(--gold, #e8c04a);
  border-bottom: 0;
  border-left-color: var(--gold, #e8c04a);
  background: linear-gradient(90deg, rgba(240, 208, 120, 0.14), transparent 85%); /* taste-skill-ignore */
}
.shell-actions {
  display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0;
}
.shell-account {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.shell-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.shell-account-btn:hover { color: #fff; }
.shell-account-ico {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22); /* taste-skill-ignore */
  background: rgba(255, 255, 255, 0.06);
}
.shell-account-ico .icon { width: 0.95em; height: 0.95em; }
.shell-logout {
  min-height: 34px;
  margin: 0;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1); /* taste-skill-ignore */
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.shell-logout:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(240, 208, 120, 0.28); /* taste-skill-ignore */
}
.shell-logout:active {
  background: rgba(255, 255, 255, 0.06);
}
.shell-cta {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.shell-cta--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22); /* taste-skill-ignore */
  color: #fff;
}
.shell-cta--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.38);
  color: #fff;
}
.shell-cta--primary {
  background: #ffd100;
  border: 1px solid #ffd100; /* taste-skill-ignore */
  color: #0a0c10;
}
.shell-cta--primary:hover {
  background: #ffe34a;
  border-color: #ffe34a;
  color: #0a0c10;
}
.lang-switch { display: flex; gap: 8px; font-size: 12px; font-weight: 700; }
.lang-switch a { color: var(--muted); text-decoration: none; }
.lang-switch a.on { color: #fff; }
.user-chip { font-size: 13px; color: var(--muted); font-weight: 600; }

/* Burger — morph to X */
.burger {
  display: none;
  position: relative;
  z-index: 70;
  width: 44px; height: 44px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.burger-box {
  display: block;
  width: 22px; height: 16px;
  margin: 0 auto;
  position: relative;
}
.burger-inner,
.burger-inner::before,
.burger-inner::after {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease,
    top 320ms cubic-bezier(0.22, 1, 0.36, 1),
    width 320ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 200ms ease;
}
.burger-inner {
  top: 7px;
  display: block;
  width: 100%;
}
.burger-inner::before,
.burger-inner::after {
  content: "";
  width: 100%;
}
.burger-inner::before { top: -7px; }
.burger-inner::after { top: 7px; width: 70%; margin-left: auto; }
.burger:hover .burger-inner,
.burger:hover .burger-inner::before,
.burger:hover .burger-inner::after { background: var(--blue-hot); }
.burger.is-open .burger-inner {
  background: transparent;
  transform: rotate(180deg);
}
.burger.is-open .burger-inner::before {
  top: 0;
  transform: rotate(45deg);
  background: #fff;
}
.burger.is-open .burger-inner::after {
  top: 0;
  width: 100%;
  transform: rotate(-45deg);
  background: #fff;
}

/* Mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  visibility: hidden;
}
.nav-drawer.is-open,
.nav-drawer.is-closing {
  pointer-events: auto;
  visibility: visible;
}
.nav-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 10, 0.72);
  opacity: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(360px, 88vw);
  padding: 88px 28px 36px;
  background:
    linear-gradient(180deg, rgba(0, 116, 224, 0.12) 0%, transparent 28%),
    #0e1016;
  box-shadow: -24px 0 64px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  overscroll-behavior: contain;
  transform: translate3d(104%, 0, 0);
  opacity: 0.96;
  transition:
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms ease;
}
.nav-drawer.is-open .nav-drawer-backdrop { opacity: 1; }
.nav-drawer.is-open .nav-drawer-panel {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.nav-drawer.is-closing .nav-drawer-backdrop { opacity: 0; }
.nav-drawer.is-closing .nav-drawer-panel {
  transform: translate3d(104%, 0, 0);
  opacity: 0.96;
  transition:
    transform 320ms cubic-bezier(0.4, 0, 0.7, 0.2),
    opacity 240ms ease;
}
.nav-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav-drawer-links a {
  display: block;
  padding: 14px 4px;
  font-family: var(--display);
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
  transform: translate3d(18px, 0, 0);
  opacity: 0;
  transition:
    color 180ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 360ms ease;
}
.nav-drawer-links a:hover,
.nav-drawer-links a[aria-current="page"] { color: #fff; }
.nav-drawer.is-open .nav-drawer-links a {
  transform: none;
  opacity: 1;
}
.nav-drawer.is-open .nav-drawer-links a:nth-child(1) { transition-delay: 70ms; }
.nav-drawer.is-open .nav-drawer-links a:nth-child(2) { transition-delay: 110ms; }
.nav-drawer.is-open .nav-drawer-links a:nth-child(3) { transition-delay: 150ms; }
.nav-drawer.is-open .nav-drawer-links a:nth-child(4) { transition-delay: 190ms; }
.nav-drawer.is-open .nav-drawer-links a:nth-child(5) { transition-delay: 230ms; }
.nav-drawer.is-open .nav-drawer-links a:nth-child(6) { transition-delay: 270ms; }
.nav-drawer.is-closing .nav-drawer-links a {
  opacity: 0;
  transform: translate3d(12px, 0, 0);
  transition-delay: 0ms;
  transition-duration: 180ms;
}
.nav-drawer-extra {
  margin-top: 20px;
  padding-top: 8px;
}
.nav-drawer-group .group {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.nav-drawer-group a {
  display: block;
  padding: 10px 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  font-weight: 600;
  opacity: 0;
  transform: translate3d(12px, 0, 0);
  transition:
    color 160ms ease,
    opacity 360ms ease,
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-drawer-group a:hover,
.nav-drawer-group a[aria-current="page"] { color: var(--blue-hot); }
.nav-drawer.is-open .nav-drawer-group a {
  opacity: 1;
  transform: none;
  transition-delay: 200ms;
}
.nav-drawer-actions {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 360ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-drawer.is-open .nav-drawer-actions {
  opacity: 1;
  transform: none;
  transition-delay: 220ms;
}
.nav-drawer.is-closing .nav-drawer-actions {
  opacity: 0;
  transition-delay: 0ms;
  transition-duration: 160ms;
}
body.nav-open {
  overflow: hidden;
  touch-action: none;
}

/* —— Buttons (Blizzard blue CTAs) —— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 22px;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background 160ms var(--ease), transform 120ms ease;
}
.btn-block { width: 100%; }
label.btn { cursor: pointer; }
.btn:hover { background: rgba(255, 255, 255, 0.14); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--blue);
  color: #fff;
}
.btn.primary:hover { background: var(--blue-hot); color: #fff; }
.btn.ghost {
  background: transparent;
  min-height: 36px;
  padding: 0 10px;
  font-weight: 600;
}
.btn.ghost:hover { background: rgba(255, 255, 255, 0.08); }
.btn.big { min-height: 52px; padding: 0 28px; font-size: 15px; }
.btn.outline {
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}
.btn.outline:hover { background: rgba(255, 255, 255, 0.1); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.field { display: grid; gap: 8px; margin-bottom: 16px; }
.field span { font-size: 13px; font-weight: 600; color: var(--muted); }
.field input, .field textarea, .field select,
.composer input, .composer textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: #0f1116;
  border: 1px solid rgba(255, 255, 255, 0.12); /* taste-skill-ignore */
  border-radius: var(--radius);
  color: var(--ink);
}
.field select,
.guide-filters select,
select.wf-select-native {
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
  background-color: #0f1116;
  background-image:
    linear-gradient(45deg, transparent 50%, #c9a227 50%),
    linear-gradient(135deg, #c9a227 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.field select option,
.guide-filters select option {
  background: #12151c;
  color: #eee;
}
.field input:focus, .field textarea:focus, .field select:focus,
.composer input:focus, .composer textarea:focus {
  outline: none; border-color: var(--blue-hot);
}

/* Custom select (replaces native OS popup) */
.wf-select {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}
.wf-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.wf-select-trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: #0f1116;
  color: #eee;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.guide-filters .wf-select-trigger {
  min-height: 38px;
  background: rgba(0, 0, 0, 0.35);
}
.wf-select-trigger:hover {
  border-color: rgba(240, 208, 112, 0.35);
}
.wf-select.is-open .wf-select-trigger,
.wf-select-trigger:focus-visible {
  outline: none;
  border-color: var(--blue-hot);
  box-shadow: 0 0 0 1px rgba(0, 174, 255, 0.25);
}
.wf-select-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-select-value.is-placeholder { color: var(--muted); }
.wf-select-chevron {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid #c9a227;
  border-bottom: 2px solid #c9a227;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms var(--ease);
}
.wf-select.is-open .wf-select-chevron {
  transform: rotate(225deg) translateY(-1px);
}
.wf-select-menu {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  display: none;
  max-height: min(280px, 50vh);
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(240, 208, 112, 0.22);
  border-radius: 6px;
  background: linear-gradient(180deg, #1a1e28, #12151c);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.wf-select.is-open .wf-select-menu { display: grid; gap: 2px; }
.wf-select-option {
  appearance: none;
  width: 100%;
  border: 0;
  background: transparent;
  color: #e8e6e0;
  text-align: left;
  padding: 9px 10px;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
}
.wf-select-option:hover,
.wf-select-option:focus-visible {
  outline: none;
  background: rgba(0, 116, 224, 0.22);
  color: #fff;
}
.wf-select-option.is-on {
  background: rgba(201, 162, 39, 0.18);
  color: #f0d078;
}
.wf-select-option.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.wf-select.is-disabled .wf-select-trigger {
  opacity: 0.45;
  cursor: not-allowed;
}
.pw-wrap {
  position: relative;
  display: grid;
}
.pw-wrap input {
  padding-right: 48px;
}
.pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.pw-toggle:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.pw-toggle .icon { width: 1.25em; height: 1.25em; }
.pw-rules {
  list-style: none;
  margin: -4px 0 18px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.pw-rules li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted-2);
}
.pw-rules li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted-2);
  flex: 0 0 auto;
}
.pw-rules li.is-ok { color: #8de6ad; }
.pw-rules li.is-ok::before { background: var(--ok); }
.pw-rules li.is-bad { color: #ffb4b4; }
.pw-rules li.is-bad::before { background: var(--ko); }
.alert {
  padding: 12px 14px; margin-bottom: 14px;
  background: rgba(255, 82, 82, 0.12); color: #ffc9c9; border-radius: var(--radius);
}
.notice {
  padding: 12px 14px; margin-bottom: 14px;
  background: rgba(0, 200, 83, 0.12); color: #b8f5cf; border-radius: var(--radius);
}
.muted { color: var(--muted); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* —— Full-bleed cinematic hero —— */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  overflow: hidden;
  background: var(--bg-deep);
  isolation: isolate;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 40%;
  transform-origin: 55% 45%;
  image-rendering: auto;
  animation: hero-ken 28s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(6, 8, 16, 0.92) 0%, rgba(10, 10, 22, 0.72) 28%, rgba(12, 8, 24, 0.28) 52%, transparent 70%),
    linear-gradient(180deg, rgba(11, 12, 16, 0.5) 0%, transparent 20%, transparent 52%, rgba(11, 12, 16, 0.78) 82%, var(--bg-deep) 100%),
    radial-gradient(ellipse 65% 50% at 16% 68%, rgba(0, 116, 224, 0.14), transparent 70%);
}
.hero-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: hero-grain 1.2s steps(2) infinite;
}
.hero-frame {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: end;
  min-height: 100svh;
  width: min(1760px, 100%);
  margin-inline: auto;
  padding: clamp(88px, 12vh, 120px) var(--page) clamp(28px, 4vh, 40px);
}
.hero-copy {
  width: min(720px, 100%);
  align-self: end;
  padding-bottom: clamp(12px, 3vh, 28px);
}
.hero-kicker {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-hot);
}
.hero-name {
  margin: 0 0 20px;
  font-family: var(--brand);
  font-size: clamp(72px, 12vw, 128px);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}
.hero-name-wow {
  display: block;
  letter-spacing: -0.02em;
}
.hero-name-forever {
  display: block;
  margin-top: 0.02em;
  color: var(--blue-hot);
  letter-spacing: 0.08em;
  font-size: 0.72em;
  font-weight: 700;
  text-shadow:
    0 2px 24px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(0, 174, 255, 0.22);
  background: linear-gradient(90deg, #7fd4ff 0%, var(--blue-hot) 40%, #4aa8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-statement {
  margin: 0 0 26px;
  max-width: 36ch;
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-cta .btn.primary.big {
  box-shadow: 0 10px 28px rgba(0, 116, 224, 0.35);
  transition: transform 180ms var(--ease), box-shadow 180ms ease;
}
.hero-cta .btn.primary.big:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 174, 255, 0.4);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 26px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.hero-meta strong { color: #fff; }
.hero-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1); /* taste-skill-ignore */
  background: rgba(8, 10, 14, 0.45);
  backdrop-filter: blur(8px);
}
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.14); /* taste-skill-ignore */
  background: rgba(8, 10, 14, 0.55);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted-2);
}
.hero-status[data-online="yes"] {
  border-color: rgba(0, 200, 83, 0.4); /* taste-skill-ignore */
  background: rgba(0, 200, 83, 0.12);
}
.hero-status[data-online="yes"] i {
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(0, 200, 83, 0.2);
  animation: live-pulse 1.8s ease-out infinite;
}
.hero-status[data-online="no"] {
  border-color: rgba(255, 82, 82, 0.4); /* taste-skill-ignore */
  background: rgba(255, 82, 82, 0.12);
}
.hero-status[data-online="no"] i { background: var(--ko); }
.hero-scroll {
  justify-self: center;
  display: grid;
  place-items: center;
  width: 28px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22); /* taste-skill-ignore */
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.7);
  transition: border-color 160ms var(--ease), color 160ms var(--ease);
}
.hero-scroll:hover {
  border-color: rgba(0, 174, 255, 0.55);
  color: #fff;
}
.hero-scroll span {
  width: 4px;
  height: 10px;
  border-radius: 999px;
  background: currentColor;
  animation: hero-scroll 1.6s var(--ease) infinite;
}
.hero-anim {
  opacity: 0;
  transform: translateY(22px);
  animation: hero-rise 780ms var(--ease) both;
  animation-delay: calc(var(--d, 0) * 90ms + 120ms);
}

@keyframes hero-ken {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.06) translate3d(-0.8%, 0.4%, 0); }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-scroll {
  0% { transform: translateY(-6px); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}
@keyframes hero-grain {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-1%, 1%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media img,
  .hero-grain,
  .hero-scroll span,
  .hero-anim,
  .hero-status[data-online="yes"] i {
    animation: none !important;
  }
  .hero-anim { opacity: 1; transform: none; }
  .hero-media img { transform: none; }
}

/* —— Forever landing (Blizzard forever page layout) —— */
.hero--forever .hero-media img {
  object-position: 35% 40%;
  transform-origin: 40% 45%;
}
.hero--forever .hero-veil {
  background:
    linear-gradient(255deg, transparent 28%, rgba(8, 12, 22, 0.35) 52%, rgba(6, 8, 16, 0.88) 78%, rgba(6, 8, 16, 0.96) 100%),
    linear-gradient(180deg, rgba(11, 12, 16, 0.45) 0%, transparent 28%, transparent 55%, rgba(11, 12, 16, 0.75) 88%, var(--bg-deep) 100%);
}
.hero-frame--end {
  align-content: center;
  justify-items: end;
}
.hero-copy--right {
  width: min(520px, 100%);
  text-align: left;
  justify-self: end;
  padding-right: 0;
}

/* Ultrawide: keep copy in the composition rail, not glued to the monitor edge */
@media (min-width: 2000px) {
  .hero-frame {
    width: min(1680px, 100%);
  }
  .hero--forever .hero-media img {
    object-position: 42% 40%;
  }
  .hero--forever .hero-veil {
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        transparent 38%,
        rgba(8, 12, 22, 0.28) 52%,
        rgba(6, 8, 16, 0.82) 64%,
        rgba(6, 8, 16, 0.9) 72%,
        rgba(6, 8, 16, 0.55) 84%,
        transparent 100%
      ),
      linear-gradient(180deg, rgba(11, 12, 16, 0.45) 0%, transparent 28%, transparent 55%, rgba(11, 12, 16, 0.75) 88%, var(--bg-deep) 100%);
  }
}
.ff-logo {
  display: block;
  width: min(360px, 78vw);
  height: auto;
  margin: 0 0 18px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
}
.ff-display {
  margin: 0 0 16px;
  font-family: "Cinzel", var(--display);
  font-weight: 700;
  font-size: clamp(34px, 4.8vw, 60px);
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}
.ff-display--gold {
  background-image: linear-gradient(#f3eee2 0%, #e2c2ab 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}
.ff-display-sm {
  margin: 0 0 12px;
  font-family: "Cinzel", var(--display);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 36px);
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.ff-kicker {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.ff-kicker--light { color: rgba(255, 255, 255, 0.92); }
.ff-lead {
  margin: 0 0 18px;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
}
.ff-lead--center {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}
.ff-center-head {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 920px;
}
.ff-center-head--left {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.ff-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.ff-section-head--over {
  position: relative;
  z-index: 2;
  padding: 56px var(--page) 0;
  margin-bottom: 18px;
}
.ff-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  margin: 0 auto 28px;
  max-width: 960px;
}
.ff-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(222, 222, 222, 0.72);
  font: inherit;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 600;
  padding: 8px 2px 10px;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  border-bottom: 3px solid transparent;
  transition: color 160ms var(--ease), border-color 160ms var(--ease);
}
.ff-tab:hover { color: #fff; }
.ff-tab.is-active {
  color: #fff;
  border-bottom-color: #00aeff;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hero-chip--patch {
  max-width: min(100%, 42rem);
  min-width: 0;
  gap: 8px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.hero-chip--patch:hover {
  color: #fff;
  border-color: rgba(240, 208, 120, 0.45);
  background: rgba(12, 14, 20, 0.62);
}
.hero-chip-label {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-chip--patch time {
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.hero-chip-sep {
  color: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}
.hero-chip-blurb {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.hero-chip-go {
  color: var(--gold);
  font-weight: 700;
  margin-left: 2px;
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .hero--forever .hero-meta {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .hero--forever .hero-meta > .hero-status,
  .hero--forever .hero-meta > .hero-chip:not(.hero-chip--patch) {
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
  .hero-chip--patch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label go"
      "time time"
      "blurb blurb";
    width: 100%;
    max-width: 100%;
    min-height: 0;
    padding: 12px 14px;
    gap: 4px 12px;
    align-items: center;
    text-align: left;
    box-sizing: border-box;
  }
  .hero-chip-label { grid-area: label; justify-self: start; }
  .hero-chip-go {
    grid-area: go;
    margin-left: 0;
    font-size: 16px;
    line-height: 1;
  }
  .hero-chip--patch time {
    grid-area: time;
    justify-self: start;
    font-size: 13px;
  }
  .hero-chip-sep { display: none; }
  .hero-chip-blurb {
    grid-area: blurb;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.4;
    text-align: left;
  }
}
.ff-ribbon {
  position: relative;
  z-index: 3;
  margin: -28px var(--page) 0;
  padding: 0;
}
.ff-ribbon-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  border: 1px solid rgba(200, 170, 90, 0.35); /* taste-skill-ignore */
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(18, 42, 52, 0.96), rgba(12, 28, 36, 0.94)),
    url("https://blz-contentstack-images.akamaized.net/v3/assets/blt9c12f249ac15c7ec/blt195a9f74585f069a/6a95c2dc2924f56db28aa8b8/countdown-timer-bg.jpg") center / cover;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.ff-ribbon-mark {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(240, 208, 120, 0.65); /* taste-skill-ignore */
  font-family: var(--brand);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.35);
}
.ff-ribbon-title {
  margin: 0 0 4px;
  font-family: "Cinzel", var(--display);
  font-size: clamp(18px, 2vw, 24px);
}
.ff-ribbon-lead { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 14px; }

.ff-parchment {
  padding: 72px var(--page);
  background-color: #d4be96;
  background-image:
    linear-gradient(180deg, rgba(232, 214, 180, 0.92), rgba(214, 192, 154, 0.95)),
    url("https://blz-contentstack-images.akamaized.net/v3/assets/blt9c12f249ac15c7ec/blt3be5fbbd8ab0160d/6a9bc736f8f1240c84bcb8fd/paper-bg.jpg");
  background-position: center;
  background-size: cover;
  color: #1b160f;
}
.ff-parchment .ff-display,
.ff-parchment .ff-display-sm { color: #1a140c; text-shadow: none; }
.ff-parchment .ff-kicker { color: #7a5a18; }
.ff-parchment .muted { color: rgba(40, 30, 18, 0.65); }
.ff-parchment--dark {
  background:
    linear-gradient(180deg, rgba(24, 28, 36, 0.96), rgba(14, 16, 22, 0.98)),
    #12141a;
  color: #fff;
}
.ff-parchment--dark .ff-display { color: #fff; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
.ff-parchment--dark .ff-kicker { color: var(--gold); }
.ff-parchment-inner { width: min(1180px, 100%); margin: 0 auto; }
.ff-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1.05fr);
  gap: 36px;
  align-items: center;
}
.ff-copy p { margin: 0; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.55; }
.ff-yt {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid rgba(180, 140, 60, 0.55); /* taste-skill-ignore */
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28);
  background: #000;
}
.ff-yt iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ff-news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.ff-news-card {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 10px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.1); /* taste-skill-ignore */
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms var(--ease), transform 160ms var(--ease);
}
.ff-news-card:hover {
  border-color: rgba(0, 174, 255, 0.4);
  color: inherit;
  transform: translateY(-2px);
}
.ff-news-thumb {
  min-height: 88px;
  border-radius: 2px;
  background: center / cover no-repeat #1a1d24;
}
.ff-news-body {
  display: grid;
  gap: 6px;
  align-content: center;
}
.ff-news-body strong { font-size: 15px; line-height: 1.3; }
.ff-empty { margin: 0; }
.ff-lobby {
  position: relative;
  padding: 72px var(--page);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(10, 14, 20, 0.72), rgba(8, 10, 14, 0.88)),
    url("/media/wow-lobby-tavern.png") center / cover no-repeat;
  isolation: isolate;
}
.ff-lobby-veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 20% 40%, rgba(180, 110, 40, 0.18), transparent 70%),
    linear-gradient(90deg, rgba(8, 10, 14, 0.55), transparent 55%);
  pointer-events: none;
}
.ff-lobby-inner {
  position: relative;
  z-index: 1;
  width: min(var(--content), 100%);
  margin-inline: auto;
}
.ff-lobby .ff-lead { color: rgba(255, 255, 255, 0.82); }
.ff-lobby .chat-wrap,
.ff-lobby .chat {
  max-width: none;
}
.ff-lobby .chat {
  border-color: rgba(255, 255, 255, 0.14); /* taste-skill-ignore */
  background: rgba(8, 10, 14, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Paper torn-edge groups (official camelot paper-mask) */
.ff-masthead-group,
.ff-features-group {
  position: relative;
  z-index: 11;
  margin-bottom: -140px;
  -webkit-mask-box-image: var(--ff-paper-mask-sm);
  mask-border: var(--ff-paper-mask-sm);
  -webkit-mask-box-image-slice: 150 479 fill;
  mask-border-slice: 150 479 fill;
}
@media (min-width: 960px) {
  .ff-masthead-group,
  .ff-features-group {
    -webkit-mask-box-image: var(--ff-paper-mask);
    mask-border: var(--ff-paper-mask);
    -webkit-mask-box-image-slice: 140 1299 fill;
    mask-border-slice: 140 1299 fill;
  }
}
.ff-masthead-group > :last-child,
.ff-features-group > :last-child {
  padding-bottom: 12%;
}
@media (min-width: 960px) {
  .ff-masthead-group > :last-child,
  .ff-features-group > :last-child {
    padding-bottom: 7%;
  }
}

/* —— Nuovi orizzonti (full-bleed video + tabs + divider cornice) —— */
.ff-zones {
  position: relative;
  overflow: visible;
  min-height: min(70vh, 640px);
  padding: 220px var(--page) 88px;
  color: #fff;
  background: #070a12;
}
.ff-zones-bgs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: #0a1220;
}
.ff-zones-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.35s ease-in-out;
  pointer-events: none;
}
.ff-zones-layer.is-active { opacity: 1; }
.ff-zones-poster,
.ff-zones-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ff-zones-poster {
  z-index: 0;
}
.ff-zones-video {
  z-index: 1;
  background: transparent;
}
.ff-zones-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.9) 0%,
    transparent 50%,
    transparent 70%,
    rgba(0, 0, 0, 0.9) 100%
  );
  pointer-events: none;
}
.ff-zones-inner {
  position: relative;
  z-index: 2;
  width: min(1100px, 100%);
  margin: 0 auto;
  text-align: center;
}
.ff-zones .ff-tabs { margin-top: 8px; }
.ff-zones-panel {
  margin: 0 auto;
  max-width: 58ch;
  color: #fff;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.55);
}
.ff-zones-panel[hidden] { display: none; }
.ff-zones-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 0;
  border: 305px solid;
  border-top-width: 0;
  border-image: var(--ff-divider);
  border-image-slice: 305 fill;
  pointer-events: none;
  z-index: 20;
}
@media (max-width: 959px) {
  .ff-zones {
    min-height: min(78vh, 720px);
    /* Room above the cornice so tabs/copy stay clear */
    padding: 120px var(--page) 100px;
    overflow-x: hidden;
  }
  .ff-zones-divider {
    /*
      Mobile: desktop border-image (305px L/R/B) collapses on narrow viewports.
      Paint the sm strip as a real image at its native aspect (1286×307) so end caps
      and the center connector stay proportional instead of squashed.
    */
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    aspect-ratio: 1286 / 307;
    width: 100%;
    border: 0;
    border-image: none;
    background-color: transparent;
    background-image: var(--ff-divider-sm);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  }
}
@media (max-width: 480px) {
  .ff-zones {
    padding-bottom: 92px;
  }
}

/* —— Avventura + luce (blue gradient group) —— */
.ff-features-group {
  background: linear-gradient(to bottom, #063149 0%, #017caa 100%);
  color: #fff;
}
.ff-features,
.ff-light {
  position: relative;
  padding: 96px var(--page) 48px;
}
.ff-features-inner {
  width: min(1280px, 100%);
  margin: 0 auto;
}
.ff-features .ff-tabs { margin-bottom: 40px; }
@media (min-width: 960px) {
  .ff-features .ff-tabs { margin-bottom: 72px; }
}
.ff-feat-stage { position: relative; }
.ff-feat-slide {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}
.ff-feat-slide[hidden] { display: none; }
.ff-feat-media {
  position: relative;
  width: 100%;
}
.ff-feat-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.ff-feat-copy {
  text-align: left;
  padding-inline: 8px;
}
.ff-feat-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
}

/* Gallery with Camelot_border cornice */
.ff-gallery {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "prev viewport next"
    "dots dots dots";
  align-items: center;
  gap: 12px 8px;
  margin-top: 12px;
}
.ff-gal-viewport {
  grid-area: viewport;
  overflow: hidden;
  width: 100%;
}
.ff-gal-track {
  --ff-gal-i: 0;
  display: flex;
  transition: transform 360ms var(--ease);
  transform: translateX(calc(var(--ff-gal-i) * -100%));
}
.ff-gal-slide {
  flex: 0 0 100%;
  margin: 0;
  padding: 0 2%;
}
.ff-gal-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0a1220;
  overflow: hidden;
}
.ff-gal-poster,
.ff-gal-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ff-gal-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ff-gal-video {
  position: relative;
  z-index: 1;
  background: transparent;
}
.ff-gal-border {
  position: absolute;
  inset: 0;
  background: var(--ff-border) center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 2;
}
.ff-gal-nav {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--ff-carousel-btn) center / cover no-repeat;
  color: #f5e6c8;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
  transition: filter 160ms var(--ease), transform 160ms var(--ease);
}
.ff-gal-nav:hover {
  filter: brightness(1.25) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
  transform: scale(1.04);
}
.ff-gal-prev { grid-area: prev; }
.ff-gal-next { grid-area: next; }
.ff-gal-dots {
  grid-area: dots;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.ff-gal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}
.ff-gal-dot.is-active { background: #00aeff; }

/* —— Skyborne —— */
.ff-skyborne {
  position: relative;
  min-height: 72vh;
  display: grid;
  align-items: end;
  padding: 180px var(--page) 96px;
  overflow: hidden;
  color: #fff;
}
.ff-skyborne-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8%;
  top: auto;
  height: 155%;
  background: var(--ff-sky-bg) 58% 18% / cover no-repeat;
  mask-image: linear-gradient(to top, #000 72%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, #000 72%, transparent 100%);
  z-index: 0;
}
.ff-skyborne-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.ff-cloud {
  position: absolute;
  width: min(60vw, 720px);
  aspect-ratio: 1;
  background: var(--ff-cloud) center / contain no-repeat;
  mix-blend-mode: lighten;
  opacity: 0.55;
  animation: ff-cloud-drift 18s ease-in-out infinite alternate;
}
.ff-cloud--a { left: -12%; bottom: 8%; transform: rotate(25deg); }
.ff-cloud--b {
  right: -14%;
  bottom: 18%;
  transform: rotate(-10deg);
  animation-delay: -6s;
  opacity: 0.4;
}
@keyframes ff-cloud-drift {
  from { translate: 0 0; }
  to { translate: 18px -22px; }
}
.ff-skyborne-inner {
  position: relative;
  z-index: 2;
  /* Align with centered Forever content column (not flush to page padding) */
  width: min(560px, 100%);
  margin-left: max(0px, calc((100% - min(1180px, 100%)) / 2));
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.35));
}

@media (max-width: 960px) {
  .hero-frame--end {
    justify-items: center;
    align-content: end;
    text-align: center;
  }
  .hero-copy--right {
    justify-self: center;
    width: min(440px, 100%);
    text-align: center;
    padding-bottom: 8px;
  }
  .hero--forever .hero-copy--right .ff-logo {
    margin-inline: auto;
    width: min(280px, 72vw);
  }
  .hero--forever .hero-copy--right .hero-statement {
    margin-inline: auto;
    max-width: 34ch;
  }
  .hero--forever .hero-copy--right .hero-cta {
    justify-content: center;
  }
  .hero--forever .hero-copy--right .hero-cta .btn {
    flex: 1 1 auto;
    min-width: min(100%, 148px);
    justify-content: center;
  }
  .hero--forever .hero-copy--right .hero-meta {
    justify-content: center;
  }
  .hero--forever .hero-media img {
    object-position: 62% 38%;
  }
  .hero--forever .hero-veil {
    background:
      linear-gradient(180deg, rgba(8, 10, 16, 0.55) 0%, rgba(8, 10, 16, 0.15) 28%, transparent 48%),
      linear-gradient(180deg, transparent 35%, rgba(6, 8, 14, 0.55) 62%, rgba(6, 8, 14, 0.92) 88%, var(--bg-deep) 100%);
  }
  .ff-ribbon-inner { grid-template-columns: auto 1fr; }
  .ff-ribbon-inner .btn { grid-column: 1 / -1; justify-self: start; }
  .ff-split,
  .ff-news-grid { grid-template-columns: 1fr; }
  .ff-news-card { grid-template-columns: 110px minmax(0, 1fr); }
  .ff-feat-slide { grid-template-columns: 1fr; }
  .ff-feat-copy { text-align: center; }
  .ff-gallery {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "viewport"
      "dots";
    gap: 10px;
  }
  .ff-gal-viewport { width: 100%; }
  .ff-gal-slide { padding: 0; }
  .ff-gal-nav {
    position: absolute;
    top: 42%;
    z-index: 3;
    width: 44px;
    height: 44px;
    font-size: 22px;
    transform: translateY(-50%);
  }
  .ff-gal-prev { left: 6px; grid-area: unset; }
  .ff-gal-next { right: 6px; grid-area: unset; }
  .ff-gal-nav:hover { transform: translateY(-50%) scale(1.04); }
  .ff-skyborne-clouds { display: none; }
  .ff-skyborne {
    min-height: 68vh;
    padding: 96px var(--page) 48px;
    align-items: end;
  }
  .ff-skyborne-bg {
    inset: 0;
    height: auto;
    bottom: 0;
    background-position: 68% 22%;
    background-size: cover;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .ff-skyborne::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(8, 12, 20, 0.45) 0%, rgba(8, 12, 20, 0.12) 28%, transparent 42%),
      linear-gradient(180deg, transparent 30%, rgba(6, 8, 14, 0.72) 58%, rgba(6, 8, 14, 0.94) 100%);
  }
  .ff-skyborne-inner {
    width: 100%;
    max-width: 36rem;
    margin-inline: auto;
    padding: 18px 16px 20px;
    border-radius: 10px;
    background: rgba(8, 10, 16, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.1); /* taste-skill-ignore */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    filter: none;
    text-align: left;
  }
  .ff-skyborne-inner .ff-kicker,
  .ff-skyborne-inner .ff-lead {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  }
  .ff-skyborne-inner .ff-lead {
    color: rgba(255, 255, 255, 0.92);
  }
  .ff-skyborne-inner .btn {
    width: 100%;
    justify-content: center;
  }
  .ff-masthead-group,
  .ff-features-group { margin-bottom: -72px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep posters visible; only stop moving video layers. */
  .ff-zones-video,
  .ff-gal-video {
    opacity: 0;
    pointer-events: none;
  }
  .ff-cloud { animation: none; }
  .ff-gal-track { transition: none; }
}

/* —— Content sections —— */
.section {
  padding: 72px var(--page);
  background: var(--bg);
}
.section.alt { background: var(--bg-deep); }
.section h2 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.section-head { margin-bottom: 8px; }
.section-lead {
  margin: 0 0 36px;
  max-width: 52ch;
  color: var(--muted);
  font-size: 17px;
}

/* Featured game tiles (blizzard.com Games grid) */
.game-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 16px;
}
.game-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  background: var(--bg-card);
  border-radius: 4px;
  overflow: hidden;
  color: #fff;
  transition: transform 180ms var(--ease), box-shadow 180ms ease;
}
.game-card:hover {
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
.game-card-lg {
  grid-row: span 1;
  min-height: 420px;
}
.game-card > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.game-card:hover > img { transform: scale(1.05); }
.game-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(11, 12, 16, 0.92) 78%);
}
.game-card-body {
  position: relative; z-index: 1;
  margin-top: auto;
  padding: 22px 20px 24px;
}
.game-tag {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue-hot);
}
.game-card h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 30px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.game-card p {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  max-width: 36ch;
}
.game-cta {
  display: inline-block;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff;
}
.game-cta::after { content: " ›"; color: var(--blue-hot); }

.blizz-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
.blizz-split .hero-kicker { margin-bottom: 8px; }
.blizz-media {
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #111;
  aspect-ratio: 4 / 5;
  max-height: 560px;
}
.blizz-media img { width: 100%; height: 100%; object-fit: cover; }

.steps-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 16px;
}
.steps-list li {
  position: relative;
  padding: 16px 16px 16px 64px;
  background: var(--bg-elev);
  border-radius: 4px;
  color: var(--muted);
  font-size: 15px;
  counter-increment: step;
}
.steps-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 16px; top: 16px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--blue-hot);
}
.steps-list strong { color: #fff; }

/* Download band (Battle.net strip) */
.bnet-band {
  padding: 64px var(--page);
  background:
    linear-gradient(90deg, rgba(0, 116, 224, 0.22), transparent 60%),
    var(--bg-elev);
}
.bnet-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  width: min(1180px, 100%);
  margin-inline: auto;
}
.bnet-band h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 42px);
  text-transform: uppercase;
}
.bnet-band p { margin: 0; color: var(--muted); max-width: 42ch; }

/* Footer */
.site-footer {
  background: #0a0b0e;
  padding: 56px var(--page) 28px;
  border-top: 1px solid var(--line); /* taste-skill-ignore */
}
.footer-brand {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 28px;
  color: #fff;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 720px;
}
.footer-grid h3 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.footer-grid a {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 8px;
}
.footer-grid a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--line); /* taste-skill-ignore */
  font-size: 12px; color: var(--muted-2);
}
.credits { font-size: 11px; color: #555860; max-width: 70ch; margin-top: 12px; }

/* —— App screens —— */
.app-frame {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 64px);
  margin-top: 64px;
  background: transparent;
}
.app-frame::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 12, 16, 0.82) 0%, rgba(11, 12, 16, 0.9) 55%, rgba(11, 12, 16, 0.96) 100%),
    var(--app-bg, url("/media/wow-bg-app.jpg")) center / cover no-repeat;
  background-color: var(--bg-deep);
}
.app-frame--forum {
  --app-bg: url("/media/wow-bg-forum.jpg");
}
.app-frame--panel {
  --app-bg: url("/media/wow-bg-app.jpg");
}
.app-frame--realm {
  --app-bg: url("/media/wow-bg-app.jpg");
}
.app-main {
  position: relative;
  z-index: 1;
  width: min(var(--content), 100%);
  margin: 0 auto;
  padding: 28px var(--page) 64px;
}
.app-main .panel,
.app-main .panel-stage {
  background: rgba(35, 38, 47, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/*
 * Full-bleed page surface for shell pages that are NOT inside .app-frame
 * (Hub, Guide, Tools, etc.). Background goes edge-to-edge; content column
 * is preserved via horizontal padding so black side bands disappear.
 */
#app > main.app-main {
  --content-col: var(--content);
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
  min-height: calc(100svh - 64px);
  padding-inline: max(var(--page), calc((100% - var(--content-col)) / 2));
  background-color: #0c0e14;
  background-image:
    radial-gradient(ellipse 80% 42% at 8% 0%, rgba(201, 162, 39, 0.1), transparent 55%),
    radial-gradient(ellipse 62% 36% at 92% 6%, rgba(40, 70, 110, 0.2), transparent 52%),
    linear-gradient(180deg, #0c0e14 0%, #12151c 42%, #0a0b10 100%);
}
#app > main.app-main.guide-page {
  --content-col: 1360px;
  padding-top: calc(96px + env(safe-area-inset-top, 0px));
  padding-bottom: 64px;
}
#app > main.app-main.guide-page--hub {
  --content-col: 1200px;
  padding-top: calc(120px + env(safe-area-inset-top, 0px));
}
#app > main.app-main.hub-sheet {
  --content-col: 1100px;
  padding-top: calc(120px + env(safe-area-inset-top, 0px));
}
#app > main.app-main.hub-sheet > .guide-crumbs {
  margin-bottom: 18px;
}
#app > main.app-main.guide-page--spellbook,
#app > main.app-main.guide-page--items {
  --content-col: 1100px;
}
#app > main.app-main.guide-page--legacy {
  --content-col: 1200px;
}

/* —— Panel (settings shell: rail + one pane) —— */
.panel-main { width: min(var(--content), 100%); }
.panel-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line); /* taste-skill-ignore */
}
.panel-hero--slim {
  align-items: flex-end;
  margin-bottom: 22px;
  padding-bottom: 16px;
}
.panel-hero--slim h1 {
  font-size: clamp(22px, 2.2vw, 30px);
}
.panel-hero-id {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.panel-avatar {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: linear-gradient(145deg, #1a3a5c, #0d2138);
  border: 1px solid rgba(0, 174, 255, 0.35);
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.panel-hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.panel-hero-email {
  margin: 4px 0 0;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panel-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
  align-items: start;
  border: 1px solid rgba(126, 200, 227, 0.14); /* taste-skill-ignore */
  border-radius: 8px;
  overflow: hidden;
  background: rgba(12, 18, 24, 0.72);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}
.panel-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  border-right: 1px solid var(--line); /* taste-skill-ignore */
  background: rgba(11, 12, 16, 0.45);
}
.panel-nav-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  text-align: left;
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.panel-nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}
.panel-nav-item[aria-selected="true"] {
  background: rgba(0, 116, 224, 0.16);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--blue-hot);
}
.panel-nav-label {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.panel-nav-meta {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel-nav-item[aria-selected="true"] .panel-nav-meta { color: rgba(127, 212, 255, 0.9); }
.panel-stage {
  min-width: 0;
  max-width: 100%;
  min-height: 320px;
  padding: 28px 28px 32px;
  border-radius: 0;
}
.panel-pane[hidden] { display: none !important; }
.panel-pane h2 {
  margin: 0 0 6px;
  font-family: "Cinzel", var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #f3e6c8;
}
.panel-lede { margin: 0 0 22px; max-width: 52ch; }
.panel-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0;
}
.panel-facts > div {
  padding: 14px 0;
  border-top: 1px solid var(--line); /* taste-skill-ignore */
}
.panel-facts--cards {
  gap: 12px;
  margin-top: 22px;
}
.panel-facts--cards > div {
  padding: 14px 16px;
  border: 1px solid var(--line); /* taste-skill-ignore */
  border-top: 1px solid var(--line); /* taste-skill-ignore */
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
}
.panel-facts dt {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel-facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  word-break: break-word;
}
.panel-status {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 3px;
  border: 1px solid rgba(0, 200, 83, 0.28);
  background: rgba(0, 200, 83, 0.08);
}
.panel-status-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(0, 200, 83, 0.15);
}
.panel-status-title {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ok);
}
.panel-status-value { margin: 0; font-size: 16px; }
.panel-form {
  display: grid;
  gap: 14px;
  max-width: 420px;
}
.panel-form[hidden] { display: none !important; }
.panel-form--compact { max-width: none; }
.panel-form .btn { justify-self: start; margin-top: 4px; }

@media (max-width: 820px) {
  .panel-layout {
    grid-template-columns: 1fr;
  }
  .panel-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line); /* taste-skill-ignore */
  }
  .panel-nav-item {
    flex: none;
    min-width: 0;
    width: auto;
    padding: 11px 6px;
    border-radius: 0;
    align-items: center;
    text-align: center;
  }
  .panel-nav-label {
    font-size: 11px;
    letter-spacing: 0.06em;
    line-height: 1.2;
  }
  .panel-nav-item[aria-selected="true"] {
    box-shadow: inset 0 -3px 0 var(--blue-hot);
    background: rgba(0, 116, 224, 0.12);
  }
  .panel-nav-meta { display: none; }
  .panel-stage { padding: 18px 14px 24px; min-height: 0; }
  .panel-facts { grid-template-columns: 1fr; }
  .panel-hero,
  .panel-hero--slim {
    margin-bottom: 12px;
    padding-bottom: 10px;
  }
  .panel-hero--slim h1,
  .panel-hero h1 {
    font-size: clamp(20px, 6vw, 26px);
  }
  .panel-hero-email {
    margin-top: 2px;
    font-size: 12px;
  }
  .forum-kicker {
    margin-bottom: 2px;
    font-size: 11px;
  }
  .panel-pane h2 {
    font-size: 1.2rem;
  }
  .panel-lede { margin-bottom: 14px; }
}
.shell-top.is-solid {
  background: rgba(12, 16, 22, 0.96);
  border: 1px solid rgba(240, 208, 120, 0.1); /* taste-skill-ignore */
}
.shell-top.is-solid .shell-brand-cluster {
  background: linear-gradient(180deg, #151922 0%, #0a0d12 100%);
}
/* Space for fixed floating bar on non-hero pages (padding only — no stacked margin) */
body:has(.shell-top.is-solid) .app-frame {
  margin-top: 0;
}
body:has(.shell-top.is-solid) .app-main,
body:has(.shell-top.is-solid) .forum-main,
body:has(.shell-top.is-solid) .panel-main {
  padding-top: calc(104px + env(safe-area-inset-top, 0px));
}
@media (max-width: 720px) {
  body:has(.shell-top.is-solid) .app-main,
  body:has(.shell-top.is-solid) .forum-main,
  body:has(.shell-top.is-solid) .panel-main {
    padding-top: calc(70px + env(safe-area-inset-top, 0px));
  }
  .app-main.panel-main {
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 40px;
  }
  .panel-main .panel-hero,
  .panel-main .panel-hero--slim {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }
  .panel-main .forum-kicker {
    margin-bottom: 0;
  }
}
.page-title {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.page-title-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.page-title h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 34px);
  text-transform: uppercase;
}
.panel {
  background: var(--bg-card);
  border-radius: 4px;
  padding: 18px;
}
.panel + .panel { margin-top: 16px; }

/* —— Forum (Blizzard community style) —— */
.forum-main { padding-top: 20px; }
.forum-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line); /* taste-skill-ignore */
}
.forum-kicker {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-hot);
}
.forum-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.forum-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 4px;
}
.forum-tab {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  border-radius: 2px;
}
.forum-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.forum-tab[aria-current="page"] {
  color: #fff;
  background: var(--blue);
}
.forum-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-2);
}
.forum-crumbs a { color: var(--blue-hot); }
.forum-crumbs a:hover { color: #fff; }
.forum-block { margin-bottom: 32px; }
.forum-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.forum-block-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.forum-news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.forum-news-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  background: rgba(35, 38, 47, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
  border-radius: 4px;
  color: #fff;
  transition: transform 160ms var(--ease), border-color 160ms ease, background 160ms ease;
}
.forum-news-card:hover {
  color: #fff;
  transform: translateY(-2px);
  border-color: rgba(0, 174, 255, 0.35); /* taste-skill-ignore */
  background: rgba(40, 45, 56, 0.95);
}
.forum-news-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-hot);
}

/* —— Official announcements (compact, matches forum cards) —— */
.ann-home .forum-block-head,
.ann-feed { margin-top: 4px; }
.ann-feed {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.ann-feed--board {
  gap: 10px;
}
.ann-card {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  min-height: 0;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
  background: rgba(28, 31, 39, 0.92);
  color: #fff;
  text-decoration: none;
  box-shadow: none;
  transition: transform 160ms var(--ease), border-color 160ms ease, background 160ms ease;
}
.ann-card:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  border-color: rgba(0, 174, 255, 0.35); /* taste-skill-ignore */
  background: rgba(32, 36, 46, 0.96);
}
.ann-card.is-featured {
  border-color: rgba(126, 200, 227, 0.22); /* taste-skill-ignore */
  background:
    linear-gradient(90deg, rgba(0, 116, 224, 0.14), transparent 42%),
    rgba(22, 28, 36, 0.96);
  box-shadow: inset 3px 0 0 var(--blue-hot);
}
.ann-feed--board .ann-card.is-featured {
  min-height: 0;
}
.ann-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ann-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-hot);
}
.ann-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ann-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
}
.ann-chip.is-pin {
  color: #f0d078;
  background: rgba(240, 208, 120, 0.14);
}
.ann-chip.is-soft {
  color: var(--muted);
}
.ann-card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.25;
}
.ann-card.is-featured h3 {
  font-size: clamp(15px, 1.2vw, 19px);
}
.ann-excerpt {
  margin: 0;
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.68);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.ann-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
}
.ann-by {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.ann-by .forum-avatar { flex: 0 0 auto; }
.ann-by span {
  display: grid;
  gap: 1px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.85);
}
.ann-by b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ann-by small { font-weight: 600; }
.ann-cta {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-hot);
  white-space: nowrap;
}
.forum-hero-card--ann {
  padding: 18px 18px;
  background: rgba(28, 31, 39, 0.92);
  border-color: rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
  border-radius: 4px;
  box-shadow: inset 3px 0 0 var(--blue-hot);
}
.ann-detail {
  display: grid;
  gap: 0;
  margin-bottom: 28px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(126, 200, 227, 0.18); /* taste-skill-ignore */
  background: rgba(8, 12, 18, 0.94);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.32);
}
.ann-detail-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: clamp(24px, 4vw, 40px);
  background:
    radial-gradient(100% 140% at 100% 0%, rgba(42, 168, 196, 0.22), transparent 50%),
    linear-gradient(160deg, rgba(8, 32, 44, 0.98), rgba(6, 10, 16, 0.96));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
}
.ann-detail-hero-copy {
  display: grid;
  gap: 14px;
  max-width: 46rem;
}
.ann-detail-hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 4.2vw, 48px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.08;
}
.ann-byline {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ann-byline strong {
  display: block;
  font-size: 16px;
}
.ann-byline p { margin: 2px 0 0; font-size: 13px; }
.ann-article {
  display: grid;
  gap: 0;
}
.ann-article-body {
  padding: clamp(22px, 3vw, 36px) clamp(22px, 4vw, 44px);
}
.ann-prose {
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.75;
  max-width: 46rem;
}
.ann-prose p { margin: 0 0 1em; }
.ann-article-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px clamp(22px, 4vw, 44px) 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
  background: rgba(0, 0, 0, 0.18);
}
.ann-comments {
  margin: 8px 0 22px;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
}
.ann-comments h2 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ann-comments--empty p { margin: 0; }
@media (max-width: 900px) {
  .ann-feed { grid-template-columns: 1fr; }
}
.forum-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.forum-cat-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 16px;
  background: rgba(28, 31, 39, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
  border-radius: 4px;
  color: #fff;
  transition: transform 160ms var(--ease), border-color 160ms ease, box-shadow 160ms ease;
}
.forum-cat-card:hover {
  color: #fff;
  transform: translateY(-2px);
  border-color: rgba(0, 116, 224, 0.45); /* taste-skill-ignore */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.forum-cat-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(201, 162, 39, 0.28); /* taste-skill-ignore */
  overflow: hidden;
  flex: 0 0 auto;
}
.forum-cat-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.forum-cat-card:hover .forum-cat-ico {
  border-color: rgba(0, 174, 255, 0.45); /* taste-skill-ignore */
  background: rgba(0, 116, 224, 0.18);
}
.forum-cat-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.forum-cat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.forum-cat-body strong {
  font-family: var(--display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.forum-cat-card.is-new {
  border-color: rgba(201, 162, 39, 0.55); /* taste-skill-ignore */
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.18), 0 8px 22px rgba(0, 0, 0, 0.28);
}
.forum-cat-new {
  flex: 0 0 auto;
  display: inline-block;
  padding: 2px 7px 1px;
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a1206;
  background: linear-gradient(180deg, #ffe08a 0%, #c9a227 52%, #8a6a12 100%);
  border: 1px solid #f3d984;
  box-shadow: 0 0 0 1px #5a3e0a, 0 1px 3px rgba(0, 0, 0, 0.45);
  border-radius: 2px;
}
.forum-cat-body .muted {
  font-size: 13px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.forum-cat-meta {
  display: grid;
  justify-items: end;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.forum-cat-meta b {
  font-family: var(--display);
  font-size: 22px;
  color: #fff;
  letter-spacing: 0;
}
.forum-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 22px;
  align-items: start;
}
.forum-primary { min-width: 0; }
.forum-side {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 84px;
}
.forum-side-panel {
  padding: 14px 14px 16px;
  background: rgba(28, 31, 39, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
  border-radius: 4px;
}
.forum-side-panel h3 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-hot);
}
.forum-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.forum-stat-grid div {
  display: grid;
  gap: 2px;
  text-align: center;
  padding: 8px 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3px;
}
.forum-stat-grid b {
  font-family: var(--display);
  font-size: 20px;
}
.forum-stat-grid span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.forum-welcome {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line); /* taste-skill-ignore */
}
.forum-welcome-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.forum-rank-list,
.forum-latest {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.forum-rank-list li,
.forum-latest a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.forum-rank-n {
  width: 1.4em;
  font-family: var(--display);
  font-weight: 700;
  color: var(--gold, #f0d078);
}
.forum-rank-meta,
.forum-latest a span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.forum-rank-meta strong,
.forum-latest a strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 13px;
}
.forum-latest a:hover strong { color: var(--blue-hot); }
.forum-latest .muted,
.forum-rank-meta .muted {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forum-avatar.has-img {
  padding: 0;
  overflow: hidden;
  background: #12141a;
}
.forum-avatar.has-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.forum-avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.forum-avatar.md { width: 42px; height: 42px; font-size: 15px; }
.forum-avatar.xl { width: 72px; height: 72px; font-size: 26px; }
.forum-avatar.xxl { width: 96px; height: 96px; font-size: 34px; }
.forum-author-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line); /* taste-skill-ignore */
  width: 100%;
}
.forum-author-stats dt {
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.forum-author-stats dd {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.forum-author-stats .span-2 { grid-column: 1 / -1; }
.forum-post-banner {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 16px 0 4px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
  background: rgba(0, 0, 0, 0.25);
}
.forum-post-banner img {
  display: block;
  width: 100%;
  max-width: none;
  height: clamp(110px, 16vw, 200px);
  object-fit: cover;
  object-position: center;
}
/* Home mid sections: atmospheric panels (not flat grey) */
.home-panel {
  position: relative;
  isolation: isolate;
  border-block: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
}
.home-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12, 16, 24, 0.78), rgba(10, 12, 18, 0.9)),
    center / cover no-repeat;
}
.home-panel > * { position: relative; z-index: 1; }
.home-community::before {
  background-image:
    linear-gradient(180deg, rgba(18, 28, 40, 0.82), rgba(10, 14, 22, 0.92)),
    url("/media/wow-bg-forum.jpg");
  background-position: center;
  background-size: cover;
}
.home-howto::before {
  background-image:
    linear-gradient(105deg, rgba(10, 14, 22, 0.88) 0%, rgba(10, 14, 22, 0.55) 48%, rgba(10, 14, 22, 0.78) 100%),
    url("/media/wow-bg-app.jpg");
  background-position: center 30%;
  background-size: cover;
}
.home-panel .section-lead { color: rgba(255, 255, 255, 0.78); }
/* Center home mid-sections like Forever blocks above (full-bleed bg, constrained content) */
.home-panel.section > .section-head,
.home-panel.section > .home-community-grid,
.home-panel.section > .blizz-split {
  width: min(1180px, 100%);
  margin-inline: auto;
}
.home-community-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 20px;
}
.home-community-col {
  padding: 20px;
  background: rgba(12, 16, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1); /* taste-skill-ignore */
  border-radius: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.home-community-col h3 {
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.home-feed,
.home-rank {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.home-feed a,
.home-rank li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.home-feed a span,
.home-rank li > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.home-feed strong,
.home-rank strong {
  color: #fff;
  font-size: 14px;
}
.home-feed a:hover strong { color: var(--blue-hot); }
.home-rank-n {
  width: 1.5em;
  flex: 0 0 auto;
  font-family: var(--display);
  font-weight: 700;
  color: var(--gold, #f0d078);
  padding-top: 4px;
}
.profile-edit-head {
  margin-bottom: 8px;
}
.profile-edit-head .panel-lede { margin-bottom: 14px; }
.profile-card {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(126, 200, 227, 0.16); /* taste-skill-ignore */
  background: rgba(8, 14, 20, 0.88);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.profile-card-banner {
  position: relative;
  width: 100%;
  height: clamp(148px, 18vw, 220px);
  background:
    radial-gradient(120% 160% at 10% 0%, rgba(42, 168, 196, 0.28), transparent 55%),
    linear-gradient(135deg, #171c26, #0b0e14 60%, #12161e);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.profile-card-banner.has-img { background: #0b0e14; }
.profile-card-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.profile-card-banner-empty {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.profile-card-banner-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 1;
}
.profile-card-banner-actions .btn {
  backdrop-filter: blur(10px);
  background: rgba(6, 12, 18, 0.72);
  border-color: rgba(255, 255, 255, 0.16); /* taste-skill-ignore */
}
.profile-card-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px 28px;
  align-items: end;
  padding: 0 22px 22px;
  margin-top: -42px;
  position: relative;
  z-index: 1;
}
.profile-card-avatar {
  display: grid;
  gap: 10px;
  justify-items: start;
}
.profile-card-avatar .forum-avatar.xxl {
  width: 96px;
  height: 96px;
  font-size: 34px;
  border-radius: 12px;
  border: 3px solid rgba(12, 18, 24, 0.95);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.profile-card-avatar .forum-avatar.xxl.has-img img {
  border-radius: 9px;
}
.profile-upload-btn { cursor: pointer; }
.profile-card-fields {
  display: grid;
  gap: 12px;
  padding-top: 48px;
  min-width: 0;
}
.profile-nick-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.profile-nick-form .field { margin: 0; }
.profile-img-hint {
  margin: 0;
  font-size: 12px;
  max-width: 46ch;
}
.panel-profile-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 28px;
}
.panel-profile-avatar {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.panel-banner-block { margin-top: 8px; }
.panel-banner-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.panel-banner-head h3 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 16px;
  text-transform: uppercase;
}
.panel-banner-preview {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(120px, 16vw, 160px);
  overflow: hidden;
  border: 1px solid var(--line); /* taste-skill-ignore */
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.28);
}
.panel-banner-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 960px) {
  .forum-layout { grid-template-columns: 1fr; }
  .forum-side { position: static; grid-template-columns: 1fr 1fr; }
  .home-community-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .forum-side { grid-template-columns: 1fr; }
  .panel-profile-grid { grid-template-columns: 1fr; }
  .profile-card-body {
    grid-template-columns: 1fr;
    margin-top: -36px;
  }
  .profile-card-fields { padding-top: 8px; }
  .profile-nick-form {
    grid-template-columns: 1fr;
  }
  .profile-card-banner-actions {
    left: 12px;
    right: 12px;
  }
}

.forum-hero-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 22px 20px;
  background:
    linear-gradient(90deg, rgba(0, 116, 224, 0.18), transparent 55%),
    rgba(28, 31, 39, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
  border-radius: 4px;
}
.forum-hero-card h2 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 30px);
  text-transform: uppercase;
}
.forum-hero-card p { margin: 0; max-width: 56ch; }
.forum-composer { margin-bottom: 18px; }
.forum-composer h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 16px;
  text-transform: uppercase;
}
.forum-composer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.forum-topic-list {
  display: grid;
  gap: 0;
  background: rgba(22, 25, 32, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
  border-radius: 4px;
  overflow: hidden;
}
.forum-topic-head {
  display: grid;
  grid-template-columns: 1fr 72px 88px;
  gap: 12px;
  padding: 10px 16px 10px 64px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  background: rgba(0, 0, 0, 0.25);
}
.forum-topic-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.05); /* taste-skill-ignore */
  transition: background 140ms ease;
}
.forum-topic-row > .forum-avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  font-size: 13px;
}
.forum-topic-row:hover {
  color: #fff;
  background: rgba(0, 116, 224, 0.1);
}
.forum-topic-row.is-pin {
  background: rgba(0, 116, 224, 0.08);
  box-shadow: inset 2px 0 0 var(--blue-hot);
}
.forum-topic-row.is-lock {
  opacity: 0.82;
}
.forum-topic-row.is-unread {
  background: rgba(0, 174, 255, 0.06);
}
.forum-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--c, var(--blue)) 28%, #111);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}
.forum-avatar.lg {
  width: 56px;
  height: 56px;
  font-size: 20px;
  margin-bottom: 8px;
}
.forum-topic-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 88px;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  min-width: 0;
}
.forum-topic-title {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  color: #fff;
}
.forum-topic-title .badge {
  vertical-align: 0.1em;
  margin-right: 6px;
}
.forum-topic-meta { display: contents; }
.forum-topic-author {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
}
.forum-topic-replies,
.forum-topic-when {
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: center;
}
.forum-topic-replies { grid-column: 2; }
.forum-topic-when { grid-column: 3; }
.forum-topic-stat {
  text-align: right;
  font-size: 13px;
  color: var(--muted);
}
.forum-topic-stat b { color: #fff; font-size: 15px; }
.forum-topic-stat-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.forum-empty { padding: 28px 18px; }
.forum-posts { display: grid; gap: 12px; margin-bottom: 18px; }
.forum-post {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  background: rgba(28, 31, 39, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
  border-radius: 4px;
  overflow: hidden;
}
.forum-post-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 20px 14px;
  background: rgba(0, 0, 0, 0.28);
  border-right: 1px solid rgba(255, 255, 255, 0.05); /* taste-skill-ignore */
}
.forum-post-author strong {
  font-size: 14px;
  word-break: break-word;
}
.forum-role {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-hot);
}
.forum-post-content {
  padding: 18px 20px 16px;
  min-width: 0;
}
.forum-post-content time {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
}
.forum-post-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
}
.forum-post-tools { display: flex; flex-wrap: wrap; gap: 4px; }
/* .forum-staff-actions replaced by .forum-staff-tools */
.forum-edited {
  font-style: italic;
  font-weight: 400;
  opacity: 0.8;
  margin-left: 0.35em;
}
.forum-edited::before { content: "· "; }
.forum-edited-line { margin: 0 0 10px; font-size: 12px; }
.forum-edited-line .forum-edited { margin-left: 0; }
.forum-edited-line .forum-edited::before { content: none; }
.forum-edit-form { margin: 12px 0 4px; }
.forum-edit-form .field { margin-bottom: 10px; }
.forum-gate-note { margin: 8px 0 0; }

/* —— Staff moderation (users / reports) —— */
.staff-mod {
  display: grid;
  gap: 18px;
}
.staff-mod-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.staff-mod-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.staff-mod-lede {
  margin: 6px 0 0;
  max-width: 48ch;
}
.staff-kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.staff-kpi-card {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 6px;
  border: 1px solid rgba(126, 200, 227, 0.14); /* taste-skill-ignore */
  background: rgba(10, 16, 22, 0.88);
}
.staff-kpi-card b {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}
.staff-kpi-card span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.staff-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.staff-filter {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1); /* taste-skill-ignore */
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.staff-filter:hover {
  color: #fff;
  border-color: rgba(126, 200, 227, 0.28); /* taste-skill-ignore */
  text-decoration: none;
}
.staff-filter.is-on {
  color: #fff;
  background: rgba(0, 116, 224, 0.22);
  border-color: rgba(0, 174, 255, 0.4); /* taste-skill-ignore */
}
.staff-table-wrap {
  overflow: auto;
  border-radius: 8px;
  border: 1px solid rgba(126, 200, 227, 0.14); /* taste-skill-ignore */
  background: rgba(8, 12, 18, 0.92);
}
.staff-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.staff-table th,
.staff-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
}
.staff-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  position: sticky;
  top: 0;
  z-index: 1;
}
.staff-table tbody tr:hover {
  background: rgba(0, 116, 224, 0.06);
}
.staff-table tbody tr.is-banned {
  background: rgba(255, 82, 82, 0.05);
}
.staff-table tbody tr.is-muted {
  background: rgba(255, 176, 32, 0.05);
}
.staff-table tbody tr:last-child td {
  border-bottom: 0;
}
.staff-col-actions {
  text-align: right;
  white-space: nowrap;
}
.staff-member {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.staff-member .forum-avatar {
  flex: 0 0 auto;
}
.staff-member-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.staff-member-copy strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staff-member-copy .muted {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staff-you {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-hot);
  background: rgba(0, 116, 224, 0.18);
  vertical-align: middle;
}
.staff-game {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.staff-role {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent; /* taste-skill-ignore */
}
.staff-role.is-admin {
  color: #f0d078;
  background: rgba(240, 208, 120, 0.12);
  border-color: rgba(240, 208, 120, 0.28); /* taste-skill-ignore */
}
.staff-role.is-mod {
  color: #7fd4ff;
  background: rgba(0, 116, 224, 0.16);
  border-color: rgba(127, 212, 255, 0.28); /* taste-skill-ignore */
}
.staff-role.is-player {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1); /* taste-skill-ignore */
}
.staff-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.staff-pill.is-ok {
  color: #7dffb0;
  background: rgba(0, 200, 83, 0.12);
}
.staff-pill.is-ban {
  color: #ff8e8e;
  background: rgba(255, 82, 82, 0.14);
}
.staff-pill.is-mute,
.staff-pill.is-warn {
  color: #ffc857;
  background: rgba(255, 176, 32, 0.14);
}
.staff-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.staff-act {
  appearance: none;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12); /* taste-skill-ignore */
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
}
.staff-act:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}
.staff-act:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.staff-act.is-danger {
  border-color: rgba(255, 82, 82, 0.4); /* taste-skill-ignore */
  color: #ffb0b0;
  background: rgba(255, 82, 82, 0.1);
}
.staff-act.is-danger:hover:not(:disabled) {
  background: rgba(255, 82, 82, 0.2);
}
.staff-act.is-warn {
  border-color: rgba(255, 176, 32, 0.4); /* taste-skill-ignore */
  color: #ffd58a;
  background: rgba(255, 176, 32, 0.1);
}
.staff-act.is-ok {
  border-color: rgba(0, 200, 83, 0.35); /* taste-skill-ignore */
  color: #9dffc0;
  background: rgba(0, 200, 83, 0.1);
}
.staff-actions-locked,
.staff-empty {
  padding: 22px 8px;
  text-align: center;
}
.staff-report-list {
  display: grid;
  gap: 10px;
}
.staff-report-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 8px;
  border: 1px solid rgba(126, 200, 227, 0.14); /* taste-skill-ignore */
  background: rgba(8, 12, 18, 0.92);
}
.staff-report-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.staff-report-main strong { font-size: 14px; }
.staff-report-main p {
  margin: 0;
  font-size: 13px;
}
@media (max-width: 820px) {
  .staff-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-report-card {
    flex-direction: column;
    align-items: stretch;
  }
}

/* —— Home lobby band (tavern + console) —— */
.lobby-band {
  position: relative;
  isolation: isolate;
  padding: 72px var(--page) 80px;
  overflow: hidden;
  background: var(--bg-deep);
}
.lobby-band-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(105deg, rgba(11, 12, 16, 0.94) 0%, rgba(11, 12, 16, 0.78) 48%, rgba(11, 12, 16, 0.55) 100%),
    linear-gradient(180deg, rgba(11, 12, 16, 0.35) 0%, transparent 30%, rgba(11, 12, 16, 0.92) 100%),
    url("/media/wow-lobby-tavern.png") 70% center / cover no-repeat;
  transform: scale(1.02);
  pointer-events: none;
}
.lobby-band-inner {
  position: relative;
  z-index: 1;
  width: min(var(--content), 100%);
  margin: 0 auto;
}
.lobby-band-head {
  margin-bottom: 28px;
  max-width: 54ch;
}
.lobby-band-head h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lobby-band-head .section-lead { margin-bottom: 0; }
.lobby-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(240px, 0.7fr);
  gap: 18px;
  align-items: stretch;
  min-height: min(64vh, 620px);
}
.lobby-console {
  min-width: 0;
  height: 100%;
}
.lobby-console .chat {
  min-height: 100%;
  height: 100%;
  background: rgba(28, 31, 39, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.1); /* taste-skill-ignore */
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.chat-head--slim {
  gap: 12px;
  min-height: 52px;
  padding: 10px 16px;
  background: rgba(11, 12, 16, 0.45);
  border-bottom: 1px solid var(--line); /* taste-skill-ignore */
}
.chat-head-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
.live-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(0, 200, 83, 0.18);
  animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.35); }
  70% { box-shadow: 0 0 0 8px rgba(0, 200, 83, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 200, 83, 0); }
}
.chat-head-sep { color: var(--muted-2); font-weight: 500; }
.chat-head-hint {
  font-size: 12px;
  font-weight: 600;
  max-width: 36ch;
  text-align: right;
  line-height: 1.35;
}
.chat-empty {
  margin: auto;
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  max-width: 36ch;
}
.lobby-aside {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1); /* taste-skill-ignore */
  background: rgba(20, 22, 28, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lobby-aside-art {
  position: relative;
  flex: 1 1 auto;
  min-height: 180px;
  overflow: hidden;
}
.lobby-aside-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transform: scale(1.04);
}
.lobby-aside-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(11, 12, 16, 0.92) 100%);
}
.lobby-aside-copy {
  position: relative;
  margin-top: -48px;
  padding: 0 20px 22px;
  z-index: 1;
}
.lobby-aside-copy h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.lobby-aside-copy p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1.5;
}
.chat-gate--card {
  inset: auto 16px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12); /* taste-skill-ignore */
  background: rgba(11, 12, 16, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.chat-gate--card p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}
.lobby-console .chat-teaser {
  filter: blur(2.5px) saturate(0.9);
  opacity: 0.72;
  user-select: none;
  pointer-events: none;
  padding-bottom: 120px; /* room above the login gate card */
}
.lobby-console:has(.chat-gate--card) .composer--locked {
  visibility: hidden; /* gate owns the CTA; keep layout height */
}
.composer--locked {
  opacity: 0.55;
  pointer-events: none;
}
.composer-locked-input {
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line); /* taste-skill-ignore */
  border-radius: 2px;
  color: var(--muted);
  font-size: 14px;
}
.lobby-console .chat-teaser .chat-msg .tools { display: none; }
.composer-picker-tabs { margin-bottom: 8px; }
.composer-picker-tabs input {
  flex: 1;
  min-height: 36px;
  padding: 8px 10px;
  background: var(--bg-deep);
  border: 1px solid var(--line); /* taste-skill-ignore */
  border-radius: 2px;
}

@media (max-width: 900px) {
  .lobby-stage {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .lobby-console .chat { min-height: min(52vh, 440px); }
  .lobby-aside { min-height: 280px; }
  .lobby-aside-art { min-height: 160px; max-height: 200px; }
  .chat-head-hint { display: none; }
}

.chat {
  display: grid; grid-template-rows: auto 1fr auto;
  min-height: min(70vh, 640px);
  background: var(--bg-card);
  border-radius: 4px;
  overflow: hidden;
}
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-elev);
}
.chat-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  text-transform: uppercase;
}
.chat-log {
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chat-msg {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(18, 22, 30, 0.72), rgba(12, 14, 20, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.chat-msg.is-mine {
  border-color: rgba(0, 174, 255, 0.18); /* taste-skill-ignore */
  background: linear-gradient(180deg, rgba(16, 28, 40, 0.8), rgba(12, 16, 24, 0.62));
}
.chat-msg .forum-avatar {
  box-shadow: 0 0 0 1px rgba(240, 208, 120, 0.22), 0 6px 16px rgba(0, 0, 0, 0.35);
}
.chat-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: color-mix(in srgb, var(--chat-hue, var(--blue)) 22%, #12141a);
  border: 1px solid color-mix(in srgb, var(--chat-hue, var(--blue)) 40%, transparent);
  font-family: "Cinzel", var(--display);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.chat-msg-main { display: grid; gap: 6px; min-width: 0; }
.chat-msg .meta {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}
.chat-msg .nick {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: "Cinzel", var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--chat-hue, #f0d078);
  cursor: pointer;
}
.chat-msg .nick:disabled { cursor: default; }
.chat-msg .nick:not(:disabled):hover { color: #fff; text-decoration: underline; }
.chat-msg .role {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  color: #0b0c10; background: linear-gradient(180deg, #f0d078, #c9a227);
  padding: 2px 7px; border-radius: 2px;
}
.chat-msg .body {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.92);
}
.chat-msg .body img.gif { max-width: min(280px, 100%); max-height: 180px; margin-top: 6px; border-radius: 3px; }
.chat-msg.is-gif [data-tr],
.chat-msg:has(.body img.gif) [data-tr] { display: none !important; }
.chat-msg .tools button {
  background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0; margin-right: 8px;
}
.chat-msg .tools button:hover { color: var(--blue-hot); }
.btn-translate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-translate .icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}
.btn-translate-lang {
  opacity: 0.78;
  font-weight: 700;
}
.btn-translate-lang::before {
  content: "·";
  margin-right: 6px;
  opacity: 0.55;
  font-weight: 600;
}
.chat-msg .tools .btn-translate {
  margin-right: 8px;
}
.forum-post-tools .btn-translate.on,
.chat-msg .tools .btn-translate.on {
  color: var(--blue-hot);
}
.chat-teaser { filter: blur(5px); user-select: none; pointer-events: none; }
.chat-gate {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(11, 12, 16, 0.75); text-align: center; padding: 24px;
}
.chat-wrap { position: relative; }
.composer {
  display: grid; gap: 8px; padding: 12px 14px;
  background: rgba(11, 12, 16, 0.5);
  border-top: 1px solid var(--line); /* taste-skill-ignore */
}
.composer-attach {
  position: relative;
  width: fit-content;
  max-width: min(280px, 100%);
  margin: 0 0 2px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(126, 200, 227, 0.28); /* taste-skill-ignore */
  background: #0a0c10;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.composer-attach img {
  display: block;
  max-width: min(280px, 100%);
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: top;
}
.composer-attach-clear {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.composer-attach-clear:hover {
  background: rgba(200, 60, 60, 0.9);
}
.composer-row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.composer-row textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  max-height: 120px;
  resize: vertical;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line); /* taste-skill-ignore */
  border-radius: 2px;
}
.composer-row textarea:disabled {
  opacity: 0.75;
  cursor: default;
}
@media (max-width: 720px) {
  .composer-row:has([data-draft]),
  .composer-row:has(.composer-locked-input) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "pick tr send"
      "draft draft draft";
    gap: 8px;
    align-items: center;
  }
  .composer-row:has([data-draft]) > [data-open-picker] { grid-area: pick; }
  .composer-row:has([data-draft]) > .btn-translate {
    grid-area: tr;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
    padding-inline: 8px;
  }
  .composer-row:has([data-draft]) > .btn-translate > span:not(.btn-translate-lang) {
    display: none;
  }
  .composer-row:has([data-draft]) > .btn-translate .btn-translate-lang::before {
    content: none;
    margin: 0;
  }
  .composer-row:has([data-draft]) > textarea,
  .composer-row:has(.composer-locked-input) > .composer-locked-input {
    grid-area: draft;
    width: 100%;
    min-width: 0;
  }
  .composer-row:has([data-draft]) > [data-send],
  .composer-row:has(.composer-locked-input) > .btn.primary,
  .composer-row:has(.composer-locked-input) > .btn {
    grid-area: send;
  }
  .composer-row:has(.composer-locked-input) > .composer-locked-input {
    grid-column: 1 / -1;
  }
  .composer-picker-tabs {
    flex-wrap: wrap;
  }
  .composer-picker-tabs input {
    flex: 1 1 100%;
    min-width: 0;
  }
}
.picker { background: var(--bg-deep); padding: 12px; max-height: 220px; overflow: auto; }
.picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px;
}
.picker-grid button {
  border: 0; background: #0a0a0a; padding: 0; cursor: pointer; aspect-ratio: 1; overflow: hidden;
}
.picker-grid img { width: 100%; height: 100%; object-fit: cover; }
.emoji-row { display: flex; flex-wrap: wrap; gap: 4px; }
.emoji-row button { background: none; border: 0; font-size: 22px; cursor: pointer; padding: 4px; }

.badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 2px 8px; background: var(--bg-elev); margin-right: 6px;
  text-transform: uppercase; border-radius: 2px;
}
.badge.pin { background: var(--blue); color: #fff; }
.post-body {
  word-break: break-word;
  line-height: 1.65;
  font-size: 15px;
}
.post-body > *:first-child { margin-top: 0; }
.post-body > *:last-child { margin-bottom: 0; }
.post-body p { margin: 0 0 0.85em; }
.post-body ul,
.post-body ol {
  margin: 0 0 0.85em;
  padding-left: 1.25em;
}
.post-body li { margin: 0.25em 0; }
.post-body h3,
.post-body h4,
.post-body h5 {
  margin: 1em 0 0.45em;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.post-body strong { color: #fff; font-weight: 700; }
.post-body em { color: rgba(255, 255, 255, 0.9); }
.post-body code {
  padding: 0.1em 0.4em;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.92em;
}
.post-body a { color: var(--blue-hot); }
.forum-post-tools .btn.ghost.on {
  color: var(--blue-hot);
  border-color: rgba(0, 174, 255, 0.35); /* taste-skill-ignore */
}
.forum-composer-tr {
  display: inline-flex;
  gap: 6px;
  margin-right: auto;
}
.quote cite {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.quote p { margin: 0 0 0.5em; }
.quote p:last-child { margin-bottom: 0; }
.quote {
  background: rgba(0, 0, 0, 0.28); padding: 10px 12px; margin: 0 0 12px;
  color: var(--muted); font-size: 14px; border-left: 3px solid var(--blue);
}
.reactions { display: flex; gap: 6px; flex-wrap: wrap; }
.reactions button {
  background: rgba(255, 255, 255, 0.06); border: 0; color: var(--ink);
  cursor: pointer; padding: 6px 10px; font-size: 13px; border-radius: 2px;
}
.reactions button:hover { background: rgba(255, 255, 255, 0.12); }
.reactions button.on { background: var(--blue); }

/* Full-bleed WoW wallpapers on sparse pages */
.page-bg {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
}
.page-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(105deg, rgba(8, 9, 12, 0.88) 0%, rgba(8, 9, 12, 0.55) 42%, rgba(8, 9, 12, 0.42) 100%),
    linear-gradient(180deg, rgba(8, 9, 12, 0.35) 0%, rgba(8, 9, 12, 0.2) 35%, rgba(8, 9, 12, 0.85) 100%),
    var(--page-bg) center / cover no-repeat;
  background-color: var(--bg-deep);
}
.page-bg-auth {
  --page-bg: url("/media/wow-bg-auth.png");
  display: grid;
  place-items: center;
  padding: 96px var(--page) 56px;
}
.page-bg-auth .auth-card {
  margin: 0;
  width: min(440px, 100%);
}

.auth-card {
  width: min(440px, 100%);
  margin: 100px auto 48px;
  padding: 32px 28px 28px;
  background: rgba(22, 25, 32, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
  border-radius: 4px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.auth-card h1 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
}
.auth-card .btn.primary { width: 100%; }
.auth-card a { color: var(--blue-hot); font-weight: 600; }
.auth-forgot {
  margin: 14px 0 0;
  text-align: right;
  font-size: 13px;
}
.auth-forgot a { font-weight: 600; }
.panel-security-head {
  margin: 0 0 18px;
}
.panel-security-head h2 {
  margin: 0 0 6px;
  font-family: "Cinzel", var(--display);
  font-size: 1.35rem;
  color: #f3e6c8;
}
.panel-security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.panel-security-card {
  padding: 18px 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(165deg, rgba(28, 32, 42, 0.92), rgba(12, 14, 18, 0.96));
}
.panel-security-card--wide {
  grid-column: 1 / -1;
}
.panel-security-card-head {
  margin: 0 0 14px;
}
.panel-security-card-head h2,
.panel-security-card-head h3 {
  margin: 0 0 6px;
  font-family: "Cinzel", var(--display);
  font-size: 1.05rem;
  color: #f3e6c8;
}
.panel-security-card-head p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

/* —— Panel PWA app —— */
.panel-app-card {
  display: grid;
  gap: 22px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background:
    linear-gradient(155deg, rgba(201, 162, 39, 0.07), transparent 42%),
    linear-gradient(165deg, rgba(28, 32, 42, 0.92), rgba(12, 14, 18, 0.96));
}
.panel-app-brand {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.panel-app-ico {
  flex-shrink: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.panel-app-head h2 {
  margin: 0 0 6px;
  font-family: "Cinzel", var(--display);
  font-size: 1.2rem;
  color: #f3e6c8;
}
.panel-app-status {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(125, 206, 160, 0.35);
  background: rgba(36, 72, 48, 0.45);
  color: #b7eccb;
  font-size: 13px;
  font-weight: 600;
}
.panel-app-install-row {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  justify-items: start;
}
.panel-app-install-hint {
  margin: 0;
  font-size: 13px;
  max-width: 52ch;
}
.panel-app-guides {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.panel-app-guide {
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
}
.panel-app-guide.is-focus {
  border-color: rgba(201, 162, 39, 0.4);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.12);
}
.panel-app-guide h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c9a227;
}
.panel-app-guide ol {
  margin: 0;
  padding-left: 1.15rem;
  display: grid;
  gap: 6px;
  color: #d8d2c4;
  font-size: 13px;
  line-height: 1.45;
}
.panel-app-push {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 10px;
}
.panel-app-push-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.panel-app-push-head h3 {
  margin: 0;
  font-family: "Cinzel", var(--display);
  font-size: 1.05rem;
  color: #f3e6c8;
}
.panel-app-push-state {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.panel-app-push-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.panel-app-push-actions .btn[hidden] {
  display: none !important;
}
@media (max-width: 720px) {
  .panel-app-guides { grid-template-columns: 1fr; }
  .panel-app-brand { gap: 12px; }
  .panel-app-ico { width: 48px; height: 48px; }
}

.panel-mfa-badge {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 200, 83, 0.35);
  background: rgba(0, 200, 83, 0.1);
  color: #b6f5c8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.panel-mfa-setup-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px 18px;
  align-items: start;
}
.panel-mfa-qr[hidden] { display: none !important; }
.panel-mfa-qr {
  margin: 0;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  width: fit-content;
}
.panel-mfa-qr-label {
  margin: 0 0 8px;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.panel-mfa-qr img {
  display: block;
  width: 180px;
  height: 180px;
  background: #fff;
}
.panel-mfa-setup-fields {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.panel-mfa-secret {
  display: block;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
  color: #fcd34d;
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  word-break: break-all;
}
.panel-mfa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.panel-mfa-recovery {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(240, 208, 120, 0.28);
  background: rgba(240, 208, 120, 0.06);
}
.panel-mfa-recovery h3 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f0d078;
}
.panel-mfa-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.panel-mfa-codes code {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: #f6ecd0;
  text-align: center;
}
.panel-forgot-game {
  margin: 0;
  padding: 18px 18px 20px;
  border-top: 0;
}
@media (max-width: 900px) {
  .panel-security-grid { grid-template-columns: 1fr; }
  .panel-mfa-setup-grid { grid-template-columns: 1fr; }
}
.panel-forgot-game h3 {
  margin: 0 0 8px;
  font-family: "Cinzel", var(--display);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.alert.ok {
  border-color: rgba(0, 200, 83, 0.35); /* taste-skill-ignore */
  background: rgba(0, 200, 83, 0.1);
  color: #b6f5c8;
}
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.split-2 > .btn,
.split-2 > .btn-block { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .split-2 { grid-template-columns: 1fr; }
}
.game-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
.game-option {
  display: flex;
  flex-direction: column;
  padding: 18px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
  border-radius: 4px;
  min-width: 0;
}
.game-option h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 16px;
  text-transform: uppercase;
}
.game-option .muted { margin: 0 0 14px; font-size: 13px; }
.game-option .panel-form { margin-top: auto; }
.game-option .btn-block { margin-top: 8px; }
.game-option .pw-rules { margin-top: 0; margin-bottom: 12px; }
.panel-form .btn-block { justify-self: stretch; width: 100%; }
.panel-nav-label,
.panel-nav-meta {
  overflow-wrap: anywhere;
  white-space: normal;
}
@media (max-width: 960px) {
  .game-options { grid-template-columns: 1fr; }
}

/* —— Admin —— */
.admin-main .panel-hero {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
}
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.admin-stat {
  display: grid;
  gap: 6px;
  padding: 16px;
  background: rgba(28, 31, 39, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
  border-radius: 4px;
}
.admin-stat b {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.admin-stat span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin-note { margin: 0 0 8px; font-size: 13px; }
.admin-dl-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px 20px;
  align-items: center;
  margin: 18px 0 12px;
  padding: 18px 20px;
  border: 1px solid rgba(240, 208, 120, 0.28);
  border-radius: 4px;
  background: rgba(28, 31, 39, 0.88);
}
.admin-dl-kicker {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.admin-dl-title {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
}
.admin-dl-status {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
}
.admin-dl-status[data-on="1"] { color: #7dffb0; }
.admin-dl-status[data-on="0"] { color: #ff8e8e; }
@media (max-width: 720px) {
  .admin-dl-card {
    grid-template-columns: 1fr;
  }
  .admin-dl-card .btn { justify-self: start; }
}
.admin-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}
.admin-search .field { margin-bottom: 0; }
.admin-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
  border-radius: 4px;
  background: rgba(28, 31, 39, 0.92);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.admin-table th,
.admin-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
  white-space: nowrap;
  vertical-align: middle;
}
.admin-table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.25);
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover td { background: rgba(0, 116, 224, 0.08); }
.admin-user-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.admin-role {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(0, 116, 224, 0.18);
  color: var(--blue-hot);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .admin-search { grid-template-columns: 1fr; }
}

/* —— Realm / game data —— */
.realm-dash {
  display: grid;
  gap: 22px;
}
.realm-status {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  padding: clamp(22px, 3vw, 36px);
  border-radius: 4px;
  border: 1px solid rgba(126, 200, 227, 0.18); /* taste-skill-ignore */
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(42, 168, 196, 0.22), transparent 55%),
    linear-gradient(135deg, rgba(18, 28, 36, 0.96), rgba(12, 16, 22, 0.92));
  position: relative;
  overflow: hidden;
}
.realm-status::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% 40%;
  height: 120%;
  background: radial-gradient(circle, rgba(126, 200, 227, 0.12), transparent 60%);
  pointer-events: none;
}
.realm-status.is-live {
  border-color: rgba(94, 210, 140, 0.35); /* taste-skill-ignore */
}
.realm-status.is-quiet {
  border-color: rgba(126, 200, 227, 0.14); /* taste-skill-ignore */
}
.realm-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.realm-status.is-live .realm-status-badge {
  color: #7de2a8;
}
.realm-status.is-live .realm-status-badge::before,
.realm-status.is-quiet .realm-status-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(125, 226, 168, 0.15);
}
.realm-status.is-quiet .realm-status-badge::before {
  background: #7ec8e3;
  box-shadow: 0 0 0 4px rgba(126, 200, 227, 0.12);
}
.realm-status-count {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(56px, 8vw, 88px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: #f4f8fb;
}
.realm-status-label {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.realm-status-fac {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
}
.realm-status-fac .is-alliance { color: #6eb6ff; }
.realm-status-fac .is-horde { color: #ff8a80; }
.realm-status-side {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}
.realm-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.realm-metric {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 3px;
  border: 1px solid var(--line); /* taste-skill-ignore */
  background: rgba(22, 26, 34, 0.9);
}
.realm-metric b {
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}
.realm-metric span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.realm-compose {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.realm-compose-card {
  padding: 16px 16px 14px;
  border-radius: 3px;
  border: 1px solid var(--line); /* taste-skill-ignore */
  background: rgba(18, 22, 30, 0.92);
  min-height: 180px;
}
.realm-compose-card header h3 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.realm-fac-split {
  display: grid;
  gap: 12px;
}
.realm-fac-track {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  grid-template-columns: var(--a, 50%) var(--h, 50%);
}
.realm-fac-track::before {
  content: "";
  background: linear-gradient(90deg, #2f7fd4, #6eb6ff);
}
.realm-fac-track::after {
  content: "";
  background: linear-gradient(90deg, #c44a4a, #ff8a80);
}
.realm-fac-legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
}
.realm-fac-legend .is-alliance { color: #6eb6ff; }
.realm-fac-legend .is-horde { color: #ff8a80; }
.realm-fac-legend .is-neutral { color: #c5cdd6; }
.realm-fac-legend b {
  margin-left: 6px;
  color: #fff;
}
.realm-dist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.realm-dist-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.realm-dist-meta span {
  color: rgba(230, 236, 242, 0.88);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.realm-dist-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.realm-dist-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(42, 168, 196, 0.85), rgba(126, 200, 227, 0.55));
}
.realm-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.realm-panel {
  padding: 18px;
  border-radius: 3px;
  border: 1px solid var(--line); /* taste-skill-ignore */
  background: rgba(18, 22, 30, 0.92);
  min-width: 0;
}
.realm-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.realm-panel-head h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.realm-panel-head h3 span {
  color: var(--muted);
  font-weight: 600;
  margin-left: 6px;
}
.realm-panel-head a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue-hot);
  text-decoration: none;
}
.realm-panel-head a:hover { text-decoration: underline; }
.realm-live-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.realm-live-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 3px;
  border: 1px solid transparent; /* taste-skill-ignore */
  background: rgba(255, 255, 255, 0.03);
}
.realm-live-list li.is-alliance {
  border-color: rgba(110, 182, 255, 0.16); /* taste-skill-ignore */
}
.realm-live-list li.is-horde {
  border-color: rgba(255, 138, 128, 0.16); /* taste-skill-ignore */
}
.realm-live-name { font-weight: 700; }
.realm-live-zone {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  max-width: 140px;
}
.realm-season-chip {
  margin: -4px 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.realm-empty-inline {
  margin: 8px 0 0;
  font-size: 13px;
}
@media (max-width: 1100px) {
  .realm-compose { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .realm-status { grid-template-columns: 1fr; }
  .realm-status-side {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
  }
  .realm-status-side .btn {
    width: 100%;
    justify-content: center;
    padding-inline: 6px;
    font-size: 12px;
  }
  .realm-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .realm-panels { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .realm-compose { grid-template-columns: 1fr; }
  .realm-live-list li {
    grid-template-columns: auto 1fr;
  }
  .realm-live-zone {
    grid-column: 2;
    text-align: left;
    max-width: none;
  }
}
.realm-home-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.realm-stat-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 28px;
}
.realm-stat-strip--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 22px;
}
.realm-stat {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 3px;
  border: 1px solid var(--line); /* taste-skill-ignore */
  background: rgba(28, 31, 39, 0.88);
}
.realm-stat b {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.realm-stat span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.realm-stat small.realm-fac {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.realm-fac .is-alliance { color: #6eb6ff; }
.realm-fac .is-horde { color: #ff8a80; }
.realm-bars {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.realm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 3px;
  width: min(100%, max(4%, var(--pct)));
  font-size: 13px;
  font-weight: 700;
}
.realm-bar.is-alliance {
  background: linear-gradient(90deg, rgba(0, 116, 224, 0.35), rgba(0, 116, 224, 0.12));
  border: 1px solid rgba(110, 182, 255, 0.28); /* taste-skill-ignore */
}
.realm-bar.is-horde {
  background: linear-gradient(90deg, rgba(178, 58, 58, 0.4), rgba(178, 58, 58, 0.12));
  border: 1px solid rgba(255, 138, 128, 0.28); /* taste-skill-ignore */
}
.realm-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.realm-home-split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  align-items: start;
}
.realm-home-split h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.realm-mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.realm-mini-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 3px;
  background: rgba(28, 31, 39, 0.75);
  border: 1px solid var(--line); /* taste-skill-ignore */
}
.realm-home-cta {
  padding: 22px;
  border-radius: 3px;
  border: 1px solid var(--line); /* taste-skill-ignore */
  background: rgba(20, 22, 28, 0.7);
}
.realm-home-cta p { margin: 0 0 16px; color: var(--muted); }
.realm-table .char-sub { display: block; font-size: 12px; margin-top: 2px; }
.realm-table td.num,
.admin-table td.num,
.admin-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.faction-tag {
  --fac-ink: #d8dde8;
  --fac-glow: rgba(255, 255, 255, 0.12);
  --fac-fill-a: #2a303c;
  --fac-fill-b: #151920;
  --fac-rim: rgba(212, 175, 95, 0.55);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 22px;
  padding: 2px 9px 2px 3px;
  border-radius: 999px;
  border: 1px solid var(--fac-rim);
  background:
    linear-gradient(180deg, rgba(255, 236, 180, 0.16), transparent 42%),
    linear-gradient(160deg, var(--fac-fill-a), var(--fac-fill-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 4px 10px rgba(0, 0, 0, 0.28);
  color: var(--fac-ink);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  vertical-align: middle;
}
.faction-tag__crest {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50%;
  border: 1px solid rgba(240, 208, 120, 0.45);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 0 8px var(--fac-glow);
  flex-shrink: 0;
  object-fit: cover;
  background: #0a0c10;
}
.faction-tag__name {
  padding-right: 2px;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65);
}
.faction-tag--compact {
  padding: 1px 8px 1px 2px;
  min-height: 20px;
  font-size: 9px;
  letter-spacing: 0.07em;
}
.faction-tag--compact .faction-tag__crest {
  width: 14px !important;
  height: 14px !important;
}
.faction-tag.is-alliance {
  --fac-ink: #c8e4ff;
  --fac-glow: rgba(80, 160, 255, 0.45);
  --fac-fill-a: #1d3a62;
  --fac-fill-b: #0d1a30;
  --fac-rim: rgba(120, 180, 255, 0.55);
}
.faction-tag.is-horde {
  --fac-ink: #ffd0c8;
  --fac-glow: rgba(220, 70, 50, 0.42);
  --fac-fill-a: #5a221c;
  --fac-fill-b: #2a0e0c;
  --fac-rim: rgba(230, 150, 90, 0.5);
}
.faction-tag.is-neutral {
  --fac-ink: var(--muted);
  --fac-glow: rgba(255, 255, 255, 0.08);
  --fac-fill-a: #2a2e36;
  --fac-fill-b: #16191f;
  --fac-rim: rgba(255, 255, 255, 0.14);
}
.faction-tag.is-neutral .faction-tag__crest {
  display: none;
}
.faction-tag.is-neutral {
  padding-left: 8px;
}
.pip-on,
.pip-off {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: middle;
}
.pip-on { background: var(--ok); box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.18); }
.pip-off { background: var(--muted-2); }

/* —— Player Hub (Guide visual language) —— */
.hub-page.guide-page--hub {
  width: 100%;
}
/* Hub roster (full account home) */
.hub-account-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
  background: rgba(0, 0, 0, 0.28);
}
.hub-account-strip > div { min-width: 0; }
.hub-account-strip dt {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.hub-account-strip dd {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #f3e6c8;
  overflow-wrap: anywhere;
}
.hub-account-strip .coin-stack { justify-content: flex-start; }
.hub-continue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0 0 28px;
}
.hub-continue .muted { margin: 0; font-size: 13px; }
.hub-picker-wrap { margin-bottom: 36px; }
.hub-roster {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.hub-roster-item {
  animation: guide-plate-in 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 40ms + 40ms);
}
@media (prefers-reduced-motion: reduce) {
  .hub-roster-item { animation: none; }
}
.hub-roster-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1.2fr) minmax(0, 1.4fr) auto;
  gap: 14px 16px;
  align-items: center;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
  background:
    linear-gradient(120deg, rgba(0, 0, 0, 0.2), transparent 40%),
    rgba(18, 22, 30, 0.92);
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}
.hub-roster-row:hover {
  border-color: rgba(240, 208, 120, 0.4);
  transform: translateY(-1px);
  background:
    linear-gradient(120deg, rgba(201, 162, 39, 0.08), transparent 45%),
    rgba(22, 26, 34, 0.96);
}
.hub-roster-row.is-alliance { box-shadow: inset 3px 0 0 rgba(91, 155, 213, 0.75); }
.hub-roster-row.is-horde { box-shadow: inset 3px 0 0 rgba(196, 92, 72, 0.8); }
.hub-roster-idx {
  font-family: "Cinzel", var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(240, 208, 120, 0.4);
}
.hub-roster-face {
  position: relative;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
}
.hub-roster-race.wow-icon {
  width: 72px;
  height: 72px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: #0a0c12;
}
.hub-roster-class {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  background: #0a0c12;
  line-height: 0;
}
.hub-roster-class .wow-icon {
  width: 100%;
  height: 100%;
  border: 0;
  box-shadow: none;
}
.hub-roster-copy { display: grid; gap: 4px; min-width: 0; }
.hub-roster-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.hub-roster-name {
  font-family: "Cinzel", var(--display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.15;
  color: #f3e6c8;
}
.hub-roster-name .char-name { color: inherit; }
.hub-roster-meta { font-size: 13px; color: var(--muted); }
.hub-roster-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 0;
  min-width: 0;
}
.hub-roster-facts dt {
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.hub-roster-facts dd {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.hub-roster-facts .coin-stack { justify-content: flex-start; gap: 6px; }
.hub-roster-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8d9a8;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.hub-roster-row:hover .hub-roster-cta {
  color: #0a0c12;
  background: #e8d9a8;
  border-color: #e8d9a8;
}
.hub-shortcuts {
  margin: 8px 0 24px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
}
.hub-shortcuts-title {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #e8d9a8;
}
.hub-shortcuts-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-shortcut {
  display: inline-flex;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #e8d9a8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
}
.hub-shortcut:hover {
  border-color: rgba(201, 162, 39, 0.5);
  color: #f3e6c8;
}
.sheet-quests {
  margin-top: 28px;
  padding-top: 8px;
}
.sheet-quests-head { margin-bottom: 10px; }
.sheet-quests .hub-tabs { margin-top: 0; }
.hub-completed-line { margin: 0 0 14px; }
@media (max-width: 960px) {
  .hub-account-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-roster-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "idx face"
      "copy copy"
      "facts facts"
      "cta cta";
  }
  .hub-roster-idx { grid-area: idx; }
  .hub-roster-face { grid-area: face; justify-self: end; }
  .hub-roster-copy { grid-area: copy; }
  .hub-roster-facts { grid-area: facts; }
  .hub-roster-cta { grid-area: cta; width: 100%; }
}

.hub-tabs { margin: 8px 0 22px; }
.hub-char-banner {
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 18px;
}
.hub-char-banner.is-alliance {
  background:
    linear-gradient(120deg, rgba(91, 155, 213, 0.14), transparent 50%),
    rgba(0, 0, 0, 0.28);
}
.hub-char-banner.is-horde {
  background:
    linear-gradient(120deg, rgba(224, 122, 95, 0.14), transparent 50%),
    rgba(0, 0, 0, 0.28);
}
.hub-quest-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.guide-plate.hub-quest-plate {
  --plate-accent: #c9a227;
  --plate-wash: rgba(201, 162, 39, 0.1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  gap: 6px;
  padding: 12px 12px 12px 14px;
}
.guide-plate.hub-quest-plate .guide-plate-index {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 11px;
  min-width: 0;
}
.guide-plate.hub-quest-plate .guide-plate-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding-left: 1.6rem;
  padding-right: 1rem;
}
.guide-plate.hub-quest-plate .guide-plate-go {
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -5px;
}
.guide-plate.hub-quest-plate .guide-plate-title {
  font-size: 0.98rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hub-quest-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
}
.hub-quest-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 8px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(210, 205, 190, 0.7);
}
.hub-quest-meta .guide-tag {
  margin: 0;
}
.guide-plate.hub-quest-plate .hub-how {
  margin: 0;
  font-size: inherit;
  color: inherit;
}
.guide-plate.hub-quest-plate .hub-objs,
.guide-plate.hub-quest-plate .hub-guide {
  margin-top: 6px;
}
.hub-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}
.hub-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #e8d9a8;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
}
.hub-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-chip:hover {
  color: #f3e6c8;
  border-color: rgba(201, 162, 39, 0.5);
}
.hub-mt {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #c9a227;
  vertical-align: middle;
}
.hub-mt-note { font-size: 0.82rem; color: rgba(230, 220, 195, 0.72); }
.hub-status {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
}
.hub-status--incomplete { color: #9ec9ff; background: rgba(80, 140, 220, 0.18); }
.hub-status--complete { color: #9fe870; background: rgba(80, 180, 80, 0.18); }
.hub-status--failed { color: #ff8a80; background: rgba(200, 60, 60, 0.18); }
.hub-objs,
.hub-guide,
.hub-simple-list,
.hub-reward-list,
.hub-next {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.hub-obj,
.hub-guide-step,
.hub-reward {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.88rem;
  color: rgba(210, 205, 190, 0.85);
}
.hub-obj.is-done { opacity: 0.55; text-decoration: line-through; }
.hub-obj-prog { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); }
.hub-guide-step {
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.hub-guide-n {
  flex-shrink: 0;
  width: 1.6em;
  height: 1.6em;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #c9a227;
  border: 1px solid rgba(201, 162, 39, 0.35);
  background: rgba(201, 162, 39, 0.08);
}
.hub-guide-step p { margin: 0; }
.hub-guide-pos {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hub-guide--compact .hub-guide-step { padding: 4px 0; }
.hub-next li { padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.hub-next a { color: #f3e6c8; }
.hub-next a:hover { color: #c9a227; }
.hub-chain-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.hub-chain-card { min-height: 0; }
.hub-locked { color: #ff8a80; font-size: 0.82rem; }
.hub-filters.guide-filters { margin-bottom: 18px; }
.hub-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.hub-empty { padding: 16px 0; color: var(--muted); }
.hub-objective {
  font-size: 1.05rem;
  color: #f3e6c8;
  margin: 0 0 10px;
}
.hub-desc { margin: 0 0 18px; }
.hub-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr);
  gap: 18px;
  align-items: start;
}
.hub-how { margin: 6px 0 0; font-size: 0.85rem; }
.hub-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
}
.hub-fallback-note {
  margin: 0 0 12px;
  font-size: 0.88rem;
  color: rgba(230, 220, 195, 0.72);
}
@media (max-width: 820px) {
  .hub-detail-grid { grid-template-columns: 1fr; }
  .hub-char-banner { flex-direction: column; align-items: flex-start; }
  .hub-quest-list {
    grid-template-columns: 1fr;
  }
  .guide-plate.hub-quest-plate .guide-plate-go { display: none; }
  .guide-plate.hub-quest-plate .guide-plate-copy { padding-right: 0; }
}

.realm-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.realm-filter-tabs { background: rgba(0, 0, 0, 0.28); }
.realm-arena-tools {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(160px, 220px) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 18px;
}
.realm-arena-tools .field { margin: 0; }
.realm-season-meta { margin: 0 0 12px; }
.realm-lookup-card {
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: 3px;
  border: 1px solid rgba(0, 174, 255, 0.25); /* taste-skill-ignore */
  background: rgba(0, 116, 224, 0.1);
}
.realm-lookup-card h3 { margin: 0 0 10px; }
.realm-arena-current {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.realm-arena-current div {
  display: grid;
  gap: 2px;
  min-width: 88px;
  padding: 8px 12px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.25);
}
.realm-season-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.realm-season-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 3px;
  border: 1px solid var(--line); /* taste-skill-ignore */
  background: rgba(28, 31, 39, 0.88);
}
.realm-season-card.is-current {
  border-color: rgba(0, 174, 255, 0.35);
}
.realm-season-card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
  text-transform: uppercase;
}
.realm-season-card header p { margin: 4px 0 0; }
.realm-podium-row {
  display: grid;
  gap: 10px;
}
.realm-podium strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.realm-podium ol {
  margin: 0;
  padding-left: 18px;
}
.char-name { font-weight: 700; }

/* —— Ladder board (podium + rows) —— */
.forum-tab--ico {
  gap: 8px;
}
.forum-tab--ico .tab-type-ico {
  width: 1em;
  height: 1em;
  opacity: 0.85;
}
.forum-tab--ico .tab-type-ico.is-gold { color: var(--gold); }
.forum-tab--ico .tab-type-ico.is-honor { color: #f0b429; }
.ladder-empty { padding: 28px 8px; text-align: center; }
/* Top-3 spotlight — flat ranked cards, no olympic metal blocks */
.ladder-spotlight {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
.ladder-spotlight[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.ladder-spotlight[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ladder-spot {
  --spot-accent: rgba(255, 255, 255, 0.18);
  --spot-wash: rgba(255, 255, 255, 0.04);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 6px 14px;
  align-items: center;
  min-width: 0;
  padding: 16px 16px 16px 14px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
  border-left: 3px solid var(--spot-accent);
  background:
    linear-gradient(135deg, var(--spot-wash), transparent 55%),
    rgba(12, 16, 24, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: podium-in 520ms var(--ease) both;
  animation-delay: calc(var(--i, 1) * 60ms);
}
.ladder-spot.place-1 {
  --spot-accent: #f0d078;
  --spot-wash: rgba(240, 208, 120, 0.12);
  border-color: rgba(240, 208, 120, 0.28);
}
.ladder-spot.place-2 {
  --spot-accent: #c5d0e0;
  --spot-wash: rgba(180, 195, 220, 0.1);
  border-color: rgba(180, 195, 220, 0.22);
}
.ladder-spot.place-3 {
  --spot-accent: #d4925a;
  --spot-wash: rgba(184, 115, 51, 0.1);
  border-color: rgba(184, 115, 51, 0.24);
}
.ladder-spot-rank {
  grid-row: 1 / span 2;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-width: 40px;
}
.ladder-spot-num {
  font-family: "Cinzel", var(--display);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--spot-accent);
  text-shadow: 0 1px 12px color-mix(in srgb, var(--spot-accent) 35%, transparent);
}
.ladder-spot-crown {
  display: grid;
  place-items: center;
  color: var(--gold);
  filter: drop-shadow(0 0 8px rgba(240, 208, 120, 0.45));
}
.ladder-spot-crown .icon { width: 18px; height: 18px; }
.ladder-spot-body { min-width: 0; }
.ladder-spot-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ladder-spot-name {
  font-family: "Cinzel", var(--display);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ladder-spot-name .char-name { font-size: inherit; }
.ladder-spot-meta {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.35;
}
.ladder-spot .ladder-score {
  grid-column: 2;
  justify-self: start;
  text-align: left;
}
.ladder-spot .ladder-score--stat,
.ladder-spot .coin-stack { justify-content: flex-start; }
/* List ranks: crown on #1, metal tint numbers */
.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 36px;
  min-height: 36px;
  padding: 0 8px;
  border-radius: 2px;
  font-family: "Cinzel", var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1); /* taste-skill-ignore */
}
.rank-badge b { font-weight: 700; }
.rank-badge .rank-ico { width: 0.95em; height: 0.95em; }
.rank-badge.is-gold {
  color: #ffe9a0;
  border-color: rgba(240, 208, 120, 0.55);
  background: linear-gradient(180deg, rgba(166, 124, 26, 0.35), rgba(60, 40, 8, 0.55));
  box-shadow: 0 0 14px rgba(240, 208, 120, 0.2);
  text-shadow: 0 0 10px rgba(240, 208, 120, 0.45);
}
.rank-badge.is-silver {
  color: #e8eef8;
  border-color: rgba(180, 195, 220, 0.45);
  background: linear-gradient(180deg, rgba(120, 135, 155, 0.3), rgba(40, 48, 60, 0.55));
}
.rank-badge.is-bronze {
  color: #f0c090;
  border-color: rgba(184, 115, 51, 0.5);
  background: linear-gradient(180deg, rgba(166, 98, 42, 0.32), rgba(50, 28, 10, 0.55));
}
.rank-badge.is-plain {
  min-width: 32px;
  min-height: 32px;
  font-size: 13px;
  color: var(--muted);
}
.ladder-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ladder-board--compact { gap: 6px; }
.ladder-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 3px;
  border: 1px solid var(--line); /* taste-skill-ignore */
  background: rgba(28, 31, 39, 0.82);
  text-decoration: none;
  color: inherit;
  animation: row-in 520ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
  transition: border-color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease);
}
a.ladder-row:hover {
  border-color: rgba(0, 174, 255, 0.35);
  background: rgba(0, 116, 224, 0.1);
  color: inherit;
  transform: translateY(-1px);
}
.ladder-row.place-1 {
  border-color: rgba(240, 208, 120, 0.35);
  background: linear-gradient(90deg, rgba(240, 208, 120, 0.12), rgba(28, 31, 39, 0.85) 42%);
}
.ladder-row.place-2 {
  border-color: rgba(180, 195, 220, 0.28);
  background: linear-gradient(90deg, rgba(180, 195, 220, 0.1), rgba(28, 31, 39, 0.85) 42%);
}
.ladder-row.place-3 {
  border-color: rgba(184, 115, 51, 0.3);
  background: linear-gradient(90deg, rgba(184, 115, 51, 0.1), rgba(28, 31, 39, 0.85) 42%);
}
.ladder-who { min-width: 0; }
.ladder-who-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ladder-who .char-sub { margin: 2px 0 0; }
.ladder-score {
  justify-self: end;
  text-align: right;
}
.ladder-score--stat {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
}
.stat-pill .icon { width: 0.95em; height: 0.95em; }
.stat-pill.is-level { color: #7fd4ff; }
.stat-pill.is-zone {
  color: #b7c4d8;
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-pill.is-kills { color: #ff8a80; }
.stat-pill.is-honor { color: #f0b429; }
.stat-pill.is-rating { color: #c4b5fd; font-family: var(--display); font-size: 16px; }
.stat-pill.is-muted { color: var(--muted); font-weight: 600; }
.ladder-score--empty {
  justify-self: end;
  min-width: 0;
  width: 0;
  height: 0;
  overflow: hidden;
}
.coin-stack {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.coin {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  animation: none;
}
.coin b { font-weight: 700; }
.coin small { display: none; }
.coin .icon { display: none; }
.coin .wow-icon.coin-ico {
  width: 14px;
  height: 14px;
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}
.coin-gold { color: #ffd100; }
.coin-silver { color: #e8e8e8; }
.coin-copper { color: #ffaa66; }
.ladder-section.is-gold .ladder-row.place-1 {
  box-shadow: 0 0 24px rgba(240, 208, 120, 0.08);
}

@keyframes podium-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes row-in {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes medal-shine {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
@keyframes coin-shimmer {
  0%, 100% { box-shadow: 0 0 10px rgba(240, 208, 120, 0.18); }
  50% { box-shadow: 0 0 18px rgba(255, 230, 150, 0.38); }
}
@keyframes card-sheen {
  0%, 55% { transform: translateX(-120%); }
  75%, 100% { transform: translateX(120%); }
}
@keyframes medal-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.96); }
  40% { opacity: 0.9; transform: scale(1.04); }
  70% { opacity: 0.35; transform: scale(1); }
}

@media (max-width: 900px) {
  .ladder-spotlight {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }
  .ladder-spot {
    padding: 14px 14px 14px 12px;
  }
  .ladder-spot-num { font-size: 1.55rem; }
  .ladder-spot-name {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  .ladder-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ladder-score {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }
  .ladder-score--stat,
  .coin-stack { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .ladder-spot,
  .ladder-row,
  .ladder-spot-crown,
  .coin-gold {
    animation: none !important;
  }
}
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.char-card {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 3px;
  border: 1px solid var(--line); /* taste-skill-ignore */
  background: rgba(28, 31, 39, 0.9);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.char-card:hover {
  border-color: rgba(0, 174, 255, 0.4);
  background: rgba(0, 116, 224, 0.1);
  color: inherit;
}
.char-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.char-card-top strong { flex: 1 1 auto; }
.char-card p { margin: 0; font-size: 13px; }
.char-card-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 6px 0 0;
}
.char-card-facts dt {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.char-card-facts dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; }
/* —— Character sheet (paperdoll) —— */
.hub-sheet.hub-page {
  width: 100%;
}
.sheet-stage {
  --sheet-accent: #c9a227;
  position: relative;
  padding: 18px 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
  background:
    radial-gradient(ellipse 70% 55% at 38% 42%, color-mix(in srgb, var(--sheet-accent) 14%, transparent), transparent 70%),
    linear-gradient(165deg, rgba(18, 22, 30, 0.96), rgba(10, 12, 18, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.sheet-stage.is-alliance { --sheet-accent: #5b9bd5; }
.sheet-stage.is-horde { --sheet-accent: #c45c48; }
.sheet-stage.is-neutral { --sheet-accent: #c9a227; }

.sheet-id {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px 16px;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
}
.sheet-id-face {
  position: relative;
  width: 56px;
  height: 56px;
}
.sheet-id-race {
  width: 56px;
  height: 56px;
  border: 2px solid color-mix(in srgb, var(--sheet-accent) 70%, #222);
  background: #0a0c12;
}
.sheet-id-class {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.sheet-id-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}
.sheet-online {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sheet-online.is-on { color: var(--ok); }
.sheet-online.is-off { color: var(--muted); }
.sheet-id-name {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.05;
  color: var(--class-color, #e8d9a8);
}
.sheet-id-name .char-name { color: inherit; }
.sheet-id-meta {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.sheet-id-money { justify-self: end; }

.sheet-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.75fr);
  gap: 20px 24px;
  align-items: start;
}

.sheet-doll { min-width: 0; }
.sheet-doll-board {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) auto;
  gap: 10px 14px;
  align-items: center;
  justify-items: center;
  padding: 12px 8px 4px;
}
.sheet-slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.sheet-slots--left,
.sheet-slots--right { justify-items: center; }
.sheet-slots--weapons {
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
}

.sheet-slot {
  display: grid;
  justify-items: center;
  gap: 2px;
  animation: sheet-slot-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 22ms + 40ms);
}
@keyframes sheet-slot-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet-slot { animation: none; }
}
.sheet-slot-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(145deg, rgba(40, 44, 54, 0.95), rgba(14, 16, 22, 0.98));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
  line-height: 0;
  overflow: hidden;
}
.sheet-slot.is-empty .sheet-slot-frame {
  border-color: rgba(255, 255, 255, 0.08);
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 0 4px, transparent 4px 8px),
    rgba(12, 14, 20, 0.9);
}
.sheet-slot.is-filled .sheet-slot-frame {
  border-color: var(--q-accent, rgba(200, 200, 200, 0.55));
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 10px color-mix(in srgb, var(--q-accent, transparent) 22%, transparent);
}
.sheet-slot.q-poor { --q-accent: #9d9d9d; }
.sheet-slot.q-common { --q-accent: #c8c8c8; }
.sheet-slot.q-uncommon { --q-accent: #1eff00; }
.sheet-slot.q-rare { --q-accent: #0070dd; }
.sheet-slot.q-epic { --q-accent: #a335ee; }
.sheet-slot.q-legendary { --q-accent: #ff8000; }
.sheet-slot-frame .wow-icon {
  display: block;
  width: 36px;
  height: 36px;
  position: relative;
  z-index: 0;
}
.sheet-slot-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.sheet-slot-dur {
  position: absolute;
  right: 1px;
  bottom: 1px;
  z-index: 2;
  padding: 0 2px;
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: #f3e6c8;
  background: rgba(0, 0, 0, 0.72);
  pointer-events: none;
}

.char-equip-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  text-decoration: none;
  background: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
.char-equip-hit span,
.char-equip-hit .icontinyl {
  display: none !important;
}

.sheet-portrait {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 0;
}
.sheet-portrait-ring {
  position: relative;
  width: min(168px, 42vw);
  aspect-ratio: 1;
  display: block;
  border: 2px solid color-mix(in srgb, var(--class-color, var(--sheet-accent)) 55%, #1a1a1a);
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--class-color, var(--sheet-accent)) 18%, transparent), transparent 65%),
    rgba(8, 10, 14, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.55),
    0 12px 28px rgba(0, 0, 0, 0.35);
}
.sheet-portrait-ring > .sheet-portrait-img.wow-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  border: 0;
  box-shadow: none;
  background: #0a0c12;
}
.sheet-portrait-class {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 2px solid rgba(0, 0, 0, 0.75);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--class-color, #c9a227) 70%, #fff);
  background: #0a0c12;
  line-height: 0;
}
.sheet-portrait-class .wow-icon {
  display: block;
  width: 100%;
  height: 100%;
}
.sheet-level {
  position: absolute;
  left: 50%;
  bottom: -10px;
  z-index: 3;
  transform: translateX(-50%);
  min-width: 36px;
  padding: 2px 8px;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  color: #0a0c12;
  background: var(--class-color, var(--sheet-accent));
  border: 1px solid rgba(0, 0, 0, 0.45);
}
.sheet-portrait-caption {
  margin: 6px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
}

.sheet-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.sheet-vitals {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
  background: rgba(0, 0, 0, 0.28);
}
.sheet-vitals > div { display: grid; gap: 2px; }
.sheet-vitals dt {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.sheet-vitals dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.sheet-quest-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.sheet-quest-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #e8d9a8;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
}
.sheet-quest-link:hover {
  color: #f3e6c8;
  border-color: color-mix(in srgb, var(--sheet-accent) 55%, transparent);
}

.sheet-panel h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #e8d9a8;
}
.sheet-prof-list,
.sheet-arena-list,
.char-prof-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.sheet-empty {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
  background: rgba(0, 0, 0, 0.22);
  font-size: 13px;
}
.sheet-prof {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
  background: rgba(0, 0, 0, 0.22);
}
.sheet-prof-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.sheet-prof-bar {
  margin-top: 5px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.sheet-prof-bar > span {
  display: block;
  height: 100%;
  background: color-mix(in srgb, var(--sheet-accent) 80%, #fff 10%);
}
.sheet-arena-row {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
  background: rgba(0, 0, 0, 0.22);
  font-size: 13px;
}

@media (max-width: 860px) {
  .sheet-layout { grid-template-columns: 1fr; }
  .sheet-id { grid-template-columns: auto 1fr; }
  .sheet-id-money {
    grid-column: 1 / -1;
    justify-self: start;
  }
}
@media (max-width: 520px) {
  .sheet-doll-board {
    grid-template-columns: auto 1fr auto;
    gap: 6px;
    padding-inline: 0;
  }
  .sheet-slot-frame { width: 36px; height: 36px; }
  .sheet-slot-frame .wow-icon { width: 30px; height: 30px; }
  .sheet-slot-label { display: none; }
  .sheet-portrait-ring { width: min(120px, 34vw); }
}

.shop-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding: 18px 20px;
  border-radius: 3px;
  border: 1px solid rgba(240, 208, 120, 0.28); /* taste-skill-ignore */
  background: linear-gradient(135deg, rgba(166, 124, 26, 0.18), rgba(28, 31, 39, 0.9));
  min-width: 0;
}
.shop-balance > div,
.shop-balance > .muted {
  min-width: 0;
  max-width: 100%;
}
.shop-balance > .muted {
  flex: 1 1 12rem;
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.shop-points {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.shop-premium {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(240, 208, 120, 0.18);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-table .is-plus { color: var(--ok); }
.admin-table .is-minus { color: var(--ko); }

@media (max-width: 720px) {
  .shop-balance {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px;
  }
  .shop-balance > .muted {
    flex: none;
    font-size: 13px;
  }
  .shop-history.admin-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }
  .shop-history .admin-table {
    display: block;
    width: 100%;
  }
  .shop-history .admin-table thead {
    display: none;
  }
  .shop-history .admin-table tbody {
    display: grid;
    gap: 10px;
  }
  .shop-history .admin-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
    border-radius: 8px;
    background: rgba(28, 31, 39, 0.92);
  }
  .shop-history .admin-table td {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .shop-history .admin-table td:nth-child(1) {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--muted);
  }
  .shop-history .admin-table td:nth-child(2) {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .shop-history .admin-table td:nth-child(3) {
    justify-self: end;
    font-weight: 700;
  }
  .shop-history .admin-table td:nth-child(4) {
    grid-column: 1 / -1;
    font-size: 13px;
  }
  .shop-history .admin-table td:nth-child(4)::before {
    content: attr(data-label);
    color: var(--muted);
    font-weight: 600;
    font-size: 12px;
  }
  .shop-history .admin-table td:nth-child(5) {
    grid-column: 1 / -1;
    font-size: 13px;
    color: var(--muted);
  }
  .shop-history .admin-table td[colspan] {
    grid-column: 1 / -1;
    text-align: left;
    color: var(--muted);
  }
}

@media (max-width: 960px) {
  .realm-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .realm-stat-strip--compact { grid-template-columns: 1fr; }
  .realm-two,
  .realm-home-split,
  .sheet-layout { grid-template-columns: 1fr; }
  .realm-arena-tools { grid-template-columns: 1fr; }
  .char-card-facts { grid-template-columns: 1fr; }
}

.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .game-grid, .blizz-split, .footer-grid {
    grid-template-columns: 1fr;
  }
  .game-card, .game-card-lg { min-height: 260px; }
  .blizz-media { max-height: 360px; aspect-ratio: 16 / 10; }
  .hero,
  .hero-frame { min-height: 92svh; }
  .hero-frame { padding-top: 96px; padding-bottom: 20px; }
  .hero-name { font-size: clamp(56px, 16vw, 88px); }
  .hero-name-forever { font-size: 0.68em; letter-spacing: 0.06em; }
  .hero-media img { object-position: 78% 40%; animation-duration: 36s; }
  .app-frame { margin-top: 64px; }
  body:has(.shell-top.is-solid) .app-frame { margin-top: 0; }
  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0;
    width: 42px;
    height: 42px;
  }
  .shell-nav,
  .shell-actions { display: none; }
  .shell-top {
    gap: 0;
    justify-content: flex-start;
    padding: 0;
    background:
      linear-gradient(180deg, rgba(22, 28, 38, 0.98) 0%, rgba(10, 13, 18, 0.98) 100%);
    border-color: rgba(240, 208, 120, 0.16); /* taste-skill-ignore */
    box-shadow:
      0 8px 28px rgba(0, 0, 0, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  .shell-brand-cluster {
    gap: 8px;
    flex: 0 0 auto;
    background: transparent;
    box-shadow: none;
    padding-right: 6px;
  }
  .shell-brand-cluster::after { display: none; }
  .shell-brand { flex: 0 1 auto; min-width: 0; }
  .shell-mobile-nav {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    min-width: 0;
    align-self: stretch;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 42%),
      rgba(0, 0, 0, 0.2);
    box-shadow:
      inset 1px 0 0 rgba(240, 208, 120, 0.12),
      inset -1px 0 0 rgba(240, 208, 120, 0.12); /* taste-skill-ignore */
  }
  .shell-mobile-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1 1 0;
    height: auto;
    min-width: 0;
    padding: 6px 4px;
    color: rgba(255, 255, 255, 0.86);
    text-decoration: none;
    border-radius: 0;
    transition: color 140ms ease, background 140ms ease;
  }
  .shell-mobile-nav a span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    opacity: 0.78;
  }
  .shell-mobile-nav a:hover,
  .shell-mobile-nav a:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
  }
  .shell-mobile-nav a[aria-current="page"] {
    color: var(--gold);
    background: rgba(240, 208, 120, 0.1);
    box-shadow: inset 0 -2px 0 var(--gold);
  }
  .shell-mobile-nav a[aria-current="page"] span { opacity: 1; }
  .shell-mobile-nav .icon {
    width: 1.35em;
    height: 1.35em;
  }
  .shell-mobile-end {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    flex-shrink: 0;
    gap: 2px;
    margin-left: 0;
    padding: 0 6px 0 4px;
    background: rgba(0, 0, 0, 0.28);
    box-shadow: none;
  }
  .shell-mobile-account {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
  }
  .shell-mobile-account:hover { color: #fff; }
  .shell-mobile-account .shell-account-ico {
    width: 30px;
    height: 30px;
    border-color: rgba(240, 208, 120, 0.32); /* taste-skill-ignore */
    background: rgba(255, 255, 255, 0.06);
  }
  .shell-top.is-solid {
    background:
      linear-gradient(180deg, rgba(18, 24, 32, 0.98) 0%, rgba(10, 13, 18, 0.98) 100%);
  }
  .forum-cat-grid { grid-template-columns: 1fr; }
  .forum-topic-head { display: none; }
  .forum-topic-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
  }
  .forum-topic-row > .forum-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
    margin-top: 1px;
  }
  .forum-topic-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
  }
  .forum-topic-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.01em;
  }
  .forum-topic-title .badge {
    display: inline-block;
    margin: 0 6px 0 0;
    padding: 1px 6px;
    font-size: 9px;
    letter-spacing: 0.08em;
  }
  .forum-topic-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0;
    row-gap: 2px;
    min-width: 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--muted);
  }
  .forum-topic-author {
    flex: 0 1 auto;
    max-width: 42%;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
  }
  .forum-topic-replies,
  .forum-topic-when {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    align-self: center;
    text-align: left;
    font-size: 11px;
    color: var(--muted);
  }
  .forum-topic-replies::before,
  .forum-topic-when::before {
    content: "·";
    margin: 0 7px;
    color: rgba(255, 255, 255, 0.28);
    font-weight: 700;
  }
  .forum-topic-stat b {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
  }
  .forum-topic-stat-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 0 4px;
    overflow: visible;
    clip: auto;
    font-weight: 600;
  }
  .forum-post { grid-template-columns: 1fr; }
  .forum-post-author {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* taste-skill-ignore */
  }
  .forum-avatar.lg { margin-bottom: 0; width: 44px; height: 44px; font-size: 16px; }
  .forum-top { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .burger-inner,
  .burger-inner::before,
  .burger-inner::after,
  .nav-drawer-backdrop,
  .nav-drawer-panel,
  .nav-drawer-links a,
  .nav-drawer-group a,
  .nav-drawer-actions {
    transition: none !important;
  }
  .nav-drawer.is-open .nav-drawer-panel { transform: none; }
}

/* —— News article (Blizzard blog layout) —— */
.ff-news {
  color: #ebdec2;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(20, 48, 62, 0.55), transparent 70%),
    #0b1218;
}
.ff-news-hero {
  position: relative;
  min-height: min(56vh, 520px);
  display: grid;
  align-items: end;
  padding: 140px var(--page) 48px;
  background: var(--ff-news-hero) center / cover no-repeat;
}
.ff-news-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 12, 18, 0.35) 0%, rgba(8, 12, 18, 0.15) 40%, rgba(11, 18, 24, 0.92) 100%),
    linear-gradient(90deg, rgba(8, 12, 18, 0.45), transparent 50%);
  pointer-events: none;
}
.ff-news-hero-inner {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  margin: 0 auto;
}
.ff-news-kicker {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(235, 222, 194, 0.75);
}
.ff-news-title {
  margin: 0 0 12px;
  font-family: "Cinzel", var(--display);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}
.ff-news-meta {
  margin: 0;
  color: rgba(235, 222, 194, 0.7);
  font-size: 14px;
}
.ff-news-body {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 36px var(--page) 96px;
  font-size: 17px;
  line-height: 1.65;
}
.ff-news-body p { margin: 0 0 1.15em; }
.ff-news-body ul {
  margin: 0 0 1.25em;
  padding-left: 1.35em;
}
.ff-news-body li { margin: 0.35em 0; }
.ff-news-body em { font-style: italic; }
.ff-news-gold {
  margin: 1.4em 0 0.75em;
  color: #daa520;
  font-family: "Cinzel", var(--display);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.ff-news-body h2.ff-news-gold { font-size: clamp(22px, 2.4vw, 30px); }
.ff-news-body h3.ff-news-gold { font-size: clamp(18px, 2vw, 24px); }
.ff-news-body h4.ff-news-gold {
  font-size: clamp(16px, 1.6vw, 20px);
  margin-top: 1.6em;
}
.ff-news-indent { margin-left: 40px; }
.ff-news-divider {
  border: 0;
  height: 1px;
  margin: 2em 0;
  background: linear-gradient(90deg, transparent, rgba(218, 165, 32, 0.55), transparent);
}
.ff-news-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 21px 0;
}
.ff-news-gallery figure {
  margin: 0;
  flex: 1 1 calc(50% - 6px);
  min-width: 0;
}
.ff-news-gallery--4 figure {
  flex: 1 1 calc(25% - 6px);
}
.ff-news-gallery img,
.ff-news-image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(218, 165, 32, 0.28); /* taste-skill-ignore */
}
.ff-news-center {
  margin: 24px 0;
}
.ff-news-image {
  width: 100%;
}
.ff-news-lightbox { display: block; }
.ff-news-back {
  margin-top: 48px !important;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
}
@media (max-width: 720px) {
  .ff-news-indent { margin-left: 12px; }
  .ff-news-gallery--4 figure { flex-basis: calc(50% - 6px); }
  .ff-news-hero { min-height: 42vh; padding-top: 110px; }
}

/* —— Notification bell + dropdown —— */
.ntf-bell,
.dm-bell {
  position: relative;
  min-width: 36px;
  min-height: 34px;
  padding: 0 8px;
}
.ntf-bell .icon,
.dm-bell .icon { width: 1.15em; height: 1.15em; }
.ntf-bell.has-unread .icon {
  animation: ntf-horn-call 1.1s ease-in-out infinite;
  animation-delay: 3.5s;
  transform-origin: 30% 55%;
}
@keyframes ntf-horn-call {
  0%, 100% { transform: rotate(0) scale(1); }
  12% { transform: rotate(-14deg) scale(1.06); }
  28% { transform: rotate(10deg) scale(1.04); }
  44% { transform: rotate(-8deg) scale(1.02); }
  60% { transform: rotate(4deg) scale(1); }
}
.ntf-bell-count,
.dm-bell-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
}
.dm-bell-count { background: var(--ko); box-shadow: none; }
.ntf-backdrop {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(4, 6, 10, 0.28);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    backdrop-filter 220ms cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-backdrop-filter 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ntf-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.ntf-backdrop.is-closing {
  opacity: 0;
  pointer-events: none;
  transition-duration: 180ms;
}
.ntf-dropdown {
  position: fixed;
  z-index: 90;
  max-height: min(70vh, 520px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(240, 208, 120, 0.18); /* taste-skill-ignore */
  background: linear-gradient(180deg, #171b24, #0e1218);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translate3d(0, -10px, 0) scale(0.96);
  transform-origin: top right;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    opacity 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* [hidden] must beat author display:grid or the panel stays visible after close (esp. Reduce Motion / iOS). */
.ntf-dropdown[hidden],
.ntf-backdrop[hidden] {
  display: none !important;
}
.ntf-dropdown.is-open {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  pointer-events: auto;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.62);
}
.ntf-dropdown.is-closing {
  opacity: 0;
  transform: translate3d(0, -8px, 0) scale(0.97);
  pointer-events: none;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.7, 0.2);
}
.ntf-dropdown.is-entering .ntf-panel-list .ntf-item,
.ntf-dropdown.is-entering .ntf-empty {
  animation: ntf-item-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ntf-dropdown.is-entering .ntf-panel-list .ntf-item:nth-child(1) { animation-delay: 40ms; }
.ntf-dropdown.is-entering .ntf-panel-list .ntf-item:nth-child(2) { animation-delay: 70ms; }
.ntf-dropdown.is-entering .ntf-panel-list .ntf-item:nth-child(3) { animation-delay: 100ms; }
.ntf-dropdown.is-entering .ntf-panel-list .ntf-item:nth-child(4) { animation-delay: 130ms; }
.ntf-dropdown.is-entering .ntf-panel-list .ntf-item:nth-child(5) { animation-delay: 160ms; }
.ntf-dropdown.is-entering .ntf-panel-list .ntf-item:nth-child(6) { animation-delay: 190ms; }
.ntf-dropdown.is-entering .ntf-panel-list .ntf-item:nth-child(n+7) { animation-delay: 210ms; }
@keyframes ntf-item-in {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ntf-backdrop,
  .ntf-dropdown,
  .ntf-dropdown.is-closing {
    transition: none !important;
  }
  .ntf-dropdown.is-entering .ntf-panel-list .ntf-item,
  .ntf-dropdown.is-entering .ntf-empty {
    animation: none !important;
  }
  .ntf-bell.has-unread .icon {
    animation: none !important;
  }
  /* Only while open: forcing opacity on the base class kept the closed panel visible. */
  .ntf-dropdown.is-open:not(.is-closing) {
    opacity: 1;
    transform: none;
  }
}
.ntf-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
}
.ntf-panel-head strong {
  font-family: "Cinzel", var(--display);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ntf-panel-actions {
  display: flex;
  gap: 2px;
  align-items: center;
}
.ntf-text-btn {
  appearance: none;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 8px;
  transition: color 120ms ease, background 120ms ease;
}
.ntf-text-btn:hover:not(:disabled) {
  color: var(--blue-hot);
  background: rgba(255, 255, 255, 0.04);
}
.ntf-text-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.ntf-text-btn.is-danger:hover:not(:disabled) {
  color: #ff8e8e;
}
.ntf-close {
  appearance: none;
  background: none;
  border: 0;
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ntf-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
@media (max-width: 720px) {
  .ntf-dropdown.is-mobile-sheet {
    max-height: min(78vh, 640px);
  }
  .ntf-close {
    width: 40px;
    height: 40px;
    font-size: 26px;
  }
}

.ntf-panel-list {
  overflow: auto;
  padding: 8px;
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 120px;
}
.ntf-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.ntf-item:hover { border-color: rgba(0, 174, 255, 0.28); }
.ntf-item.is-unread {
  background: rgba(0, 116, 224, 0.12);
  border-color: rgba(0, 174, 255, 0.2); /* taste-skill-ignore */
}
.ntf-av {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #1a2230;
  border: 1px solid rgba(0, 174, 255, 0.18); /* taste-skill-ignore */
  font-family: var(--display);
  font-weight: 700;
  color: var(--blue-hot);
  overflow: hidden;
  flex-shrink: 0;
}
.ntf-av.has-img img { width: 100%; height: 100%; object-fit: cover; }
.ntf-item-main { min-width: 0; display: grid; gap: 2px; }
.ntf-item-main strong {
  font-size: 13px;
  line-height: 1.35;
}
.ntf-item-main p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ntf-item-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}
.ntf-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--blue-hot);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ntf-type .icon { width: 0.9em; height: 0.9em; }
.ntf-del {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  opacity: 0.55;
  transition: opacity 120ms ease, color 120ms ease, background 120ms ease;
}
.ntf-item:hover .ntf-del,
.ntf-page-item:hover .ntf-del { opacity: 1; }
.ntf-del:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.ntf-panel-foot {
  display: block;
  padding: 12px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
  font-weight: 700;
  font-size: 13px;
  color: var(--blue-hot);
  transition: background 120ms ease;
}
.ntf-panel-foot:hover { background: rgba(0, 116, 224, 0.08); }
.ntf-empty {
  margin: 0;
  padding: 32px 16px;
  text-align: center;
  display: grid;
  gap: 6px;
  place-items: center;
}
.ntf-empty strong {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ntf-empty p { margin: 0; font-size: 13px; color: var(--muted); }
.ntf-page {
  display: grid;
  gap: 16px;
}
.ntf-page-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
  background:
    linear-gradient(160deg, rgba(0, 116, 224, 0.12), transparent 55%),
    rgba(16, 20, 28, 0.72);
}
.ntf-page-hero h2 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 28px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ntf-page-hero .muted { margin: 0; }
.ntf-page-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ntf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ntf-filter {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1); /* taste-skill-ignore */
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.ntf-filter.is-on,
.ntf-filter:hover {
  color: #fff;
  border-color: rgba(0, 174, 255, 0.4); /* taste-skill-ignore */
  background: rgba(0, 116, 224, 0.14);
}
.ntf-page-list { display: grid; gap: 8px; }
.ntf-page-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.07); /* taste-skill-ignore */
  background: rgba(22, 28, 38, 0.92);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.ntf-page-item:hover {
  border-color: rgba(0, 174, 255, 0.28);
  background: rgba(28, 36, 50, 0.96);
}
.ntf-page-item.is-unread {
  border-color: rgba(0, 174, 255, 0.28); /* taste-skill-ignore */
  box-shadow: inset 3px 0 0 var(--blue-hot);
  background: rgba(0, 116, 224, 0.08);
}
.ntf-page-main { min-width: 0; display: grid; gap: 4px; }
.ntf-page-main strong {
  font-size: 15px;
  line-height: 1.35;
}
.ntf-page-main p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.ntf-page-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.ntf-page-empty {
  margin: 0;
  padding: 48px 20px;
  text-align: center;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.1); /* taste-skill-ignore */
  background: rgba(0, 0, 0, 0.16);
  display: grid;
  gap: 8px;
  place-items: center;
}
.ntf-page-empty strong {
  font-family: var(--display);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ntf-page-empty p { margin: 0; color: var(--muted); font-size: 14px; }

/* Shared confirm dialog (notifications, DM, etc.) */
.site-confirm {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 160ms ease;
}
.site-confirm.is-in { opacity: 1; }
.site-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 14, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.site-confirm-card {
  position: relative;
  z-index: 1;
  width: min(360px, calc(100% - 28px));
  padding: 18px 18px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1); /* taste-skill-ignore */
  background: linear-gradient(180deg, rgba(28, 34, 46, 0.98), rgba(16, 20, 28, 0.98));
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  transform: translateY(8px) scale(0.98);
  transition: transform 180ms ease;
}
.site-confirm.is-in .site-confirm-card {
  transform: none;
}
.site-confirm-card h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.site-confirm-card p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.site-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}
.site-confirm-cancel {
  appearance: none;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
}
.site-confirm-cancel:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}
.site-confirm-actions .btn.danger {
  background: linear-gradient(160deg, #ff6b6b, #d93838);
  border: 0;
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .site-confirm,
  .site-confirm-card { transition: none; }
}

/* —— DM bell + slide-over panel —— */
html.dm-open,
body.dm-open {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}
body.dm-open {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
}
#dm-root {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  overscroll-behavior: none;
}
#dm-root .dm-panel,
#dm-root .dm-log,
#dm-root .dm-inbox-scroll,
#dm-root .dm-panel-body {
  overscroll-behavior: contain;
  touch-action: pan-y;
}
#dm-root.is-open,
#dm-root.is-closing {
  pointer-events: auto;
}
.dm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, 0.62);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    backdrop-filter 320ms cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-backdrop-filter 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
#dm-root.is-open .dm-backdrop {
  opacity: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#dm-root.is-closing .dm-backdrop {
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition-duration: 260ms;
}
.dm-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100%);
  display: grid;
  grid-template-rows: auto 1fr;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(0, 116, 224, 0.14), transparent 55%),
    linear-gradient(180deg, #171c26 0%, #0e1218 42%, #0b0e14 100%);
  border-left: 1px solid rgba(240, 208, 120, 0.16); /* taste-skill-ignore */
  box-shadow: -24px 0 64px rgba(0, 0, 0, 0.55);
  transform: translate3d(104%, 0, 0);
  opacity: 0.96;
  will-change: transform;
  transition:
    transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms ease;
}
#dm-root.is-open .dm-panel {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  box-shadow: -28px 0 72px rgba(0, 0, 0, 0.62);
}
#dm-root.is-closing .dm-panel {
  transform: translate3d(104%, 0, 0);
  opacity: 0.96;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.7, 0.2);
}
.dm-view {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0;
  transform: translate3d(14px, 0, 0);
  transition:
    opacity 260ms cubic-bezier(0.22, 1, 0.36, 1) 40ms,
    transform 340ms cubic-bezier(0.22, 1, 0.36, 1) 20ms;
}
.dm-view.dm-view--inbox {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: stretch;
}
.dm-view.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .dm-backdrop,
  .dm-panel,
  .dm-view {
    transition: none !important;
  }
  #dm-root.is-open .dm-panel,
  #dm-root.is-closing .dm-panel {
    transform: none;
    opacity: 1;
  }
  .dm-view {
    opacity: 1;
    transform: none;
  }
}
.dm-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07); /* taste-skill-ignore */
}
.dm-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dm-panel-head h2 {
  margin: 0;
  font-family: "Cinzel", var(--display);
  font-size: 18px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dm-head-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.dm-panel-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.dm-text-btn {
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.dm-text-btn:hover:not(:disabled) { color: var(--blue-hot); background: rgba(255, 255, 255, 0.04); }
.dm-text-btn:disabled { opacity: 0.35; cursor: default; }
.dm-icon-btn {
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.dm-icon-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.dm-panel-body {
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
}
.dm-search {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 12px 14px 4px;
  padding: 0 12px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
  background: rgba(0, 0, 0, 0.28);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.dm-search:focus-within {
  border-color: rgba(0, 174, 255, 0.45); /* taste-skill-ignore */
  box-shadow: 0 0 0 3px rgba(0, 116, 224, 0.18);
}
.dm-search-ico {
  width: 18px;
  height: 18px;
  color: var(--muted-2);
}
.dm-search input {
  width: 100%;
  margin: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: #fff;
  outline: none;
}
.dm-search input::placeholder { color: var(--muted-2); }
.dm-search-clear {
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.dm-search-clear:hover { color: #fff; }
.dm-inbox-scroll {
  min-height: 0;
  overflow: auto;
  padding: 8px 10px 16px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.dm-section { display: grid; gap: 8px; }
.dm-section--secondary { opacity: 0.98; }
.dm-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-family: "Cinzel", var(--display);
}
.dm-section-hint {
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font);
  color: var(--muted);
}
.dm-thread-list,
.dm-search-hits {
  display: grid;
  gap: 4px;
  align-content: start;
}
.dm-thread-row,
.dm-hit {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 10px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.dm-thread-row:hover,
.dm-hit:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
}
.dm-thread-row.is-unread {
  background: rgba(0, 116, 224, 0.12);
  border-color: rgba(0, 174, 255, 0.16); /* taste-skill-ignore */
}
.dm-av-wrap { position: relative; flex-shrink: 0; }
.dm-av {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #243044, #151b26);
  border: 1px solid rgba(240, 208, 120, 0.22); /* taste-skill-ignore */
  font-family: "Cinzel", var(--display);
  font-weight: 700;
  font-size: 15px;
}
.dm-av--letter { color: var(--gold); }
.dm-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #4a5160;
  border: 2px solid #10141b;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.dm-dot.is-on { background: var(--ok); }
.dm-thread-meta,
.dm-hit-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.dm-thread-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.dm-thread-meta strong,
.dm-hit-meta strong {
  font-family: "Cinzel", var(--display);
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-thread-top time {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted-2);
}
.dm-thread-preview,
.dm-hit-status {
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-hit-status.is-on { color: #7dffb0; }
.dm-hit-go {
  color: var(--muted-2);
  font-size: 16px;
  transition: color 140ms ease, transform 140ms ease;
}
.dm-hit:hover .dm-hit-go {
  color: var(--blue-hot);
  transform: translateX(2px);
}
.dm-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.dm-badge-spacer { width: 20px; }
.dm-empty-card {
  margin: 4px 2px;
  padding: 28px 18px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.1); /* taste-skill-ignore */
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}
.dm-empty-card p { margin: 0 0 6px; }
.dm-empty-card .muted { margin: 0; font-size: 13px; }
.dm-empty-card--chat { margin: auto; }
.dm-empty-inline {
  margin: 0;
  padding: 12px 8px;
  color: var(--muted);
  font-size: 13px;
}
.dm-thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07); /* taste-skill-ignore */
}
.dm-thread-peer { flex: 1; min-width: 0; display: grid; }
.dm-thread-peer strong {
  font-family: "Cinzel", var(--display);
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-online { font-size: 11px; color: var(--muted); }
.dm-online.is-on { color: #7dffb0; }
.dm-log {
  min-height: 0;
  overflow: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 48px),
    transparent;
}
.dm-bubble {
  align-self: flex-start;
  max-width: 84%;
  padding: 10px 12px 8px;
  border-radius: 4px 16px 16px 16px;
  background: rgba(28, 34, 46, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
.dm-bubble.is-mine {
  align-self: flex-end;
  border-radius: 16px 4px 16px 16px;
  background: linear-gradient(160deg, rgba(0, 116, 224, 0.46), rgba(0, 70, 130, 0.4));
  border-color: rgba(0, 174, 255, 0.22); /* taste-skill-ignore */
}
.dm-bubble.is-editing {
  outline: 1px solid rgba(0, 174, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 116, 224, 0.16);
}
.dm-bubble.is-deleted { opacity: 0.65; font-size: 13px; box-shadow: none; }
.dm-bubble time { display: block; margin-top: 5px; font-size: 10.5px; color: var(--muted-2); }
.dm-bubble-body { white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.dm-gif { max-width: 220px; max-height: 160px; border-radius: 8px; }
.dm-edited { font-size: 11px; color: var(--muted); }
.dm-msg-tools {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.dm-bubble:hover .dm-msg-tools,
.dm-bubble:focus-within .dm-msg-tools { opacity: 1; }
.dm-msg-tools button {
  background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0;
}
.dm-msg-tools button:hover { color: var(--blue-hot); }
.dm-typing {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  max-width: 160px;
  background: rgba(32, 38, 50, 0.9);
}
.dm-typing-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.dm-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dm-typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  animation: dm-typing-bounce 1.2s ease-in-out infinite;
}
.dm-typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.dm-typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dm-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.dm-composer {
  display: grid;
  gap: 8px;
  padding: 10px 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07); /* taste-skill-ignore */
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.18));
}
.dm-composer-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}
.dm-edit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0, 174, 255, 0.22); /* taste-skill-ignore */
  background: rgba(0, 116, 224, 0.12);
  font-size: 12px;
  color: #9fd8ff;
}
.dm-composer.is-editing textarea {
  border-color: rgba(0, 174, 255, 0.35); /* taste-skill-ignore */
}
.dm-composer textarea {
  resize: none;
  min-height: 44px;
  max-height: 120px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
  background: rgba(0, 0, 0, 0.32);
  line-height: 1.4;
  overflow-y: auto;
}
.dm-composer textarea:focus {
  border-color: rgba(0, 174, 255, 0.4); /* taste-skill-ignore */
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 116, 224, 0.16);
}
.dm-send {
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--blue-hot), var(--blue));
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(0, 116, 224, 0.28);
  transition: transform 120ms ease, filter 120ms ease;
}
.dm-send svg { width: 18px; height: 18px; }
.dm-send:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dm-send:active { transform: translateY(0); }
.dm-confirm {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 160ms ease;
}
.dm-confirm.is-in { opacity: 1; }
.dm-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 8, 14, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.dm-confirm-card {
  position: relative;
  z-index: 1;
  width: min(340px, calc(100% - 28px));
  padding: 18px 18px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1); /* taste-skill-ignore */
  background: linear-gradient(180deg, rgba(28, 34, 46, 0.98), rgba(16, 20, 28, 0.98));
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}
.dm-confirm-card h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dm-confirm-card p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.dm-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}
.dm-confirm-actions .btn.danger {
  background: linear-gradient(160deg, #ff6b6b, #d93838);
  border: 0;
  color: #fff;
}
@media (max-width: 560px) {
  .dm-panel { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-typing-dots i { animation: none; opacity: 0.75; }
}

/* �� Guide / Tools / ForeverDB �� */
.db-credit {
  margin: 28px 0 4px;
  max-width: 320px;
}
.db-credit--footer {
  margin: 18px 0 10px;
}
.db-credit-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 10px 14px 10px 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(120deg, rgba(201, 162, 39, 0.1), transparent 55%),
    rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}
.db-credit-link:hover {
  border-color: rgba(201, 162, 39, 0.45);
  background:
    linear-gradient(120deg, rgba(201, 162, 39, 0.16), transparent 55%),
    rgba(0, 0, 0, 0.38);
  transform: translateY(-1px);
}
.db-credit-mark {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #c9a227;
  border: 1px solid rgba(201, 162, 39, 0.35);
  background: rgba(201, 162, 39, 0.1);
}
.db-credit-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.2;
}
.db-credit-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.db-credit-name {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: #e8d9a8;
  letter-spacing: 0.01em;
}
.db-credit-link:hover .db-credit-name { color: #f3e6c8; }
.db-credit-go {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted-2);
  transition: color 160ms ease, transform 160ms ease;
}
.db-credit-link:hover .db-credit-go {
  color: #c9a227;
  transform: translate(1px, -1px);
}

.guide-page {
  width: 100%;
  margin: 0 auto;
  padding: 96px var(--page) 64px;
}
.guide-head { margin-bottom: 28px; }
.guide-head h1 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 8px 0 10px;
  color: #f3e6c8;
}
.guide-lead { color: var(--muted); max-width: 62ch; margin: 0; }
.guide-crumbs {
  font-size: 13px;
  color: var(--muted-2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.guide-crumbs a { color: var(--muted); }
.guide-crumbs a:hover { color: #fff; }

.guide-pending {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  background: linear-gradient(160deg, rgba(40, 32, 12, 0.7), rgba(18, 16, 12, 0.85));
  color: #e8d9a8;
}
.guide-pending-title {
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
  color: #c9a227;
}
.guide-pending p { margin: 0; font-size: 14px; }

.guide-section { margin: 32px 0; }
.guide-section h2 {
  font-family: var(--display);
  font-size: 1.25rem;
  color: #e8d9a8;
  margin: 0 0 14px;
}
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.guide-card {
  display: block;
  padding: 18px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(165deg, rgba(28, 30, 36, 0.95), rgba(14, 15, 18, 0.98));
  color: inherit;
  text-decoration: none;
  transition: border-color 140ms ease, transform 140ms ease;
}
.guide-card:hover {
  border-color: rgba(201, 162, 39, 0.45);
  transform: translateY(-1px);
}
.guide-card h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 1.05rem;
  color: #f3e6c8;
}
.guide-card p { margin: 0; font-size: 14px; color: var(--muted); }
.guide-card--static { cursor: default; }
.guide-card--static:hover { transform: none; }

.guide-table-wrap { overflow-x: auto; margin: 12px 0 20px; }
.guide-table-wrap--matrix {
  overflow-x: visible;
}
.rm-mobile { display: none; }
.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.guide-table th,
.guide-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: left;
}
.guide-table thead th {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.guide-table--matrix {
  table-layout: fixed;
  width: 100%;
}
.guide-table--matrix th,
.guide-table--matrix td {
  text-align: center;
  padding: 8px 3px;
  vertical-align: middle;
}
.guide-table--matrix th:first-child,
.guide-table--matrix td:first-child {
  text-align: left;
  width: 12.75rem;
  max-width: 12.75rem;
  padding-inline: 8px;
  overflow: hidden;
  white-space: normal;
}
.guide-table--matrix .rm-cell .kind-mark {
  min-width: 0;
  width: 100%;
  max-width: 5rem;
  margin: 0 auto;
  padding: 6px 4px 5px;
}
.guide-table--matrix .rm-cell .kind-mark-txt {
  display: block;
  font-size: 9px;
}
.guide-table--matrix .rm-cell .kind-mark-ico {
  font-size: 14px;
}
.guide-table--matrix .rm-class-h {
  min-width: 0;
}
.guide-table--matrix .rm-class-name {
  display: block;
  font-size: 11px;
}
.rm-faction {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted-2);
}
.rm-new { color: #c9a227; }
.rm-ok { color: #7dcea0; }
.rm-na { color: #555860; }
.guide-legend { font-size: 13px; color: var(--muted); }

.guide-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.guide-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.guide-pill.is-on,
.guide-pill:hover {
  color: #f3e6c8;
  border-color: rgba(201, 162, 39, 0.5);
}

.guide-page--racials { width: min(1180px, 100%); }
.racial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.racial-grid--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 640px;
}
.racial-card {
  margin: 0;
  padding: 16px 16px 14px;
  border: 1px solid rgba(91, 155, 213, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(165deg, rgba(28, 36, 52, 0.55), rgba(8, 10, 16, 0.92));
}
.racial-card header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.racial-card h2 { margin: 0; font-family: var(--display); color: #f3e6c8; }
.racial-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.racial-list li {
  padding: 10px 12px;
  background: rgba(0,0,0,0.28);
  border-left: 3px solid rgba(255,255,255,0.12);
  border-radius: 0 8px 8px 0;
}
.racial-list li[data-kind="new"] { border-left-color: #c9a227; }
.racial-list li[data-kind="changed"] { border-left-color: #5b9bd5; }
.racial-kind {
  margin-left: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-2);
}
.racial-list p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
@media (max-width: 860px) {
  .racial-grid { grid-template-columns: 1fr; }
}

.guide-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: end;
  margin: 0 0 18px;
}
.guide-filters label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--muted-2);
}
.guide-filters input,
.guide-filters select {
  min-width: 110px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: #eee;
  font: inherit;
}
.guide-filters .wf-select {
  min-width: 140px;
}
.guide-filters input:focus,
.guide-filters select:focus {
  outline: none;
  border-color: var(--blue-hot);
}
.guide-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #c9a227;
}
.guide-plain-list { padding-left: 1.2em; color: var(--muted); }
.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--blue-hot, #4db2ff);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.item-name { font-family: var(--display); }
.spell-detail {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.28);
}

/* —— Spellbook —— */
.guide-page--spellbook { width: 100%; }
.spellbook-filters {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(28, 32, 42, 0.95), rgba(10, 12, 18, 0.98));
}
.spellbook-filters input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.4);
  color: #eee;
  font: inherit;
}
.spellbook-filters input:focus {
  outline: none;
  border-color: var(--blue-hot);
}
.spellbook-filters .items-qchips { margin-top: 12px; }
.item-chip--new {
  color: #f0d070;
  border-color: rgba(201, 162, 39, 0.45);
  background: rgba(40, 32, 12, 0.45);
}
.spells-atlas { display: grid; gap: 22px; }
.spell-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
}
.spell-group-title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c9a227;
}
.spell-group-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted-2);
}
.spell-group--arcane .spell-group-title { color: #a78bfa; }
.spell-group--fire .spell-group-title { color: #fb923c; }
.spell-group--frost .spell-group-title { color: #7dd3fc; }
.spell-group--holy .spell-group-title,
.spell-group--discipline .spell-group-title { color: #fde68a; }
.spell-group--shadow .spell-group-title { color: #c084fc; }
.spell-group--arms .spell-group-title,
.spell-group--fury .spell-group-title,
.spell-group--protection .spell-group-title { color: #fca5a5; }
.spell-group--marksmanship .spell-group-title,
.spell-group--beast-mastery .spell-group-title,
.spell-group--survival .spell-group-title { color: #86efac; }

.spells-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.spell-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 9px 11px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(91, 155, 213, 0.1), transparent 50%),
    rgba(0, 0, 0, 0.3);
  transition: border-color 140ms ease, transform 140ms ease;
  animation: guide-plate-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 16ms);
}
.guide-nav-pending {
  min-height: 120px;
  display: grid;
  place-items: center;
}
.spell-card:hover {
  border-color: rgba(91, 155, 213, 0.5);
  transform: translateY(-2px);
}
.spell-card.is-new {
  border-color: rgba(201, 162, 39, 0.35);
  background:
    linear-gradient(135deg, rgba(201, 162, 39, 0.12), transparent 50%),
    rgba(0, 0, 0, 0.3);
}
.spell-card--arcane { --spell-accent: #a78bfa; }
.spell-card--fire { --spell-accent: #fb923c; }
.spell-card--frost { --spell-accent: #7dd3fc; }
.spell-card--arcane .spell-ico,
.spell-card--fire .spell-ico,
.spell-card--frost .spell-ico {
  border-color: color-mix(in srgb, var(--spell-accent) 55%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--spell-accent) 22%, transparent);
}
.spell-ico {
  display: grid;
  place-items: center;
  padding: 2px;
  border-radius: 6px;
  border: 2px solid rgba(91, 155, 213, 0.45);
  background: #0a0c12;
  box-shadow: 0 0 12px rgba(80, 140, 220, 0.15);
}
.spell-ico--xl {
  border-color: rgba(201, 162, 39, 0.5);
  box-shadow: 0 0 18px rgba(201, 162, 39, 0.25);
}
.spell-card-body { min-width: 0; display: grid; gap: 3px; }
.spell-card-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.25;
  color: #7fd4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spell-card:hover .spell-card-name { color: #b8e7ff; }
.spell-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
  font-size: 11px;
  color: #c8c4bc;
}
.spell-card-lv {
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
}
.spell-card-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
}
.spell-card-tag--new {
  color: #f0d070;
  border-color: rgba(201, 162, 39, 0.45);
}
.spell-sheet {
  max-width: 640px;
  padding: 20px;
  border: 1px solid rgba(91, 155, 213, 0.35);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, rgba(91, 155, 213, 0.16), transparent 55%),
    linear-gradient(165deg, rgba(22, 26, 36, 0.98), rgba(8, 10, 14, 0.98));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.spell-sheet-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.spell-sheet-kicker {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c9a227;
}
.spell-sheet-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  color: #7fd4ff;
}
.spell-sheet-desc {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.55;
  color: #e8e6e0;
}
@media (max-width: 720px) {
  .spells-board {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 6px;
  }
  .spell-card { padding: 8px 9px; gap: 8px; }
  .spell-card-name { font-size: 0.84rem; }
}

.talent-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 18px;
  font-family: var(--display);
  color: #e8d9a8;
}
.talent-trees {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.talent-tree {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 40%),
    rgba(0, 0, 0, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.talent-tree-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0 2px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.talent-tree h2 {
  font-family: var(--display);
  font-size: 1.05rem;
  margin: 0;
  color: #f3e6c8;
  letter-spacing: 0.02em;
}
.talent-tree-pts {
  font-family: var(--display);
  font-size: 0.95rem;
  color: #c9a227;
  font-variant-numeric: tabular-nums;
}
.talent-tree:nth-child(1) {
  border-color: rgba(140, 120, 200, 0.28);
  box-shadow: inset 0 2px 0 rgba(140, 120, 200, 0.45);
}
.talent-tree:nth-child(2) {
  border-color: rgba(200, 90, 50, 0.32);
  box-shadow: inset 0 2px 0 rgba(210, 100, 45, 0.5);
}
.talent-tree:nth-child(3) {
  border-color: rgba(90, 160, 210, 0.32);
  box-shadow: inset 0 2px 0 rgba(90, 170, 220, 0.5);
}
.talent-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.talent-slot {
  min-width: 0;
  min-height: 64px;
  max-width: 100%;
  padding: 5px 4px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.35);
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  font: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  box-sizing: border-box;
}
.talent-slot.is-empty {
  visibility: hidden;
  pointer-events: none;
}
.talent-slot.has-points {
  border-color: rgba(201, 162, 39, 0.55);
  color: #f3e6c8;
  background: rgba(40, 32, 12, 0.55);
}
.talent-slot.is-max { box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.7); }
.talent-slot.is-locked { opacity: 0.45; }
.talent-slot.is-new { border-color: rgba(91, 155, 213, 0.5); }
.talent-name {
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.talent-rank {
  font-size: 11px;
  color: var(--muted-2);
  flex-shrink: 0;
}
.talent-tip {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.3);
  max-width: 48ch;
}

@media (max-width: 900px) {
  .talent-trees {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* —— Legacy Calculator (Eternity-inspired) —— */
.guide-page--legacy {
  width: 100%;
}
.legacy-hero {
  display: grid;
  grid-template-columns: 1.2fr auto;
  gap: 18px 28px;
  align-items: center;
  margin: 12px 0 22px;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background:
    radial-gradient(ellipse 50% 80% at 0% 0%, rgba(201, 162, 39, 0.12), transparent 55%),
    linear-gradient(165deg, rgba(22, 28, 40, 0.98), rgba(10, 12, 18, 0.98));
}
.legacy-hero-copy h1 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  color: #f3e6c8;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.legacy-cap-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #1a1200;
  background: linear-gradient(180deg, #f0d070, #c9a227);
  border-radius: 999px;
}
.legacy-hero-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.legacy-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}
.legacy-stat {
  min-width: 110px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
}
.legacy-stat-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 4px;
}
.legacy-stat strong {
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
}
.legacy-stat--remain {
  border-color: rgba(80, 180, 120, 0.45);
  background: rgba(30, 70, 45, 0.35);
}
.legacy-stat--remain strong { color: #7dcea0; }
.legacy-stat--spent strong { color: #f0d070; }
.legacy-chips {
  display: flex;
  gap: 8px;
  align-items: center;
}
.legacy-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
}
.legacy-chip strong {
  font-variant-numeric: tabular-nums;
  color: #f3e6c8;
}
.legacy-chip--gold { border-color: rgba(201, 162, 39, 0.4); }
.legacy-chip--blue { border-color: rgba(91, 155, 213, 0.45); }
.legacy-chip--green { border-color: rgba(125, 206, 160, 0.4); }
.legacy-hero-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.legacy-share-btn {
  background: linear-gradient(180deg, rgba(240, 208, 112, 0.2), rgba(201, 162, 39, 0.12));
  border-color: rgba(201, 162, 39, 0.55);
  color: #f3e6c8;
}

.legacy-panel[hidden] { display: none !important; }
.legacy-panel { margin-bottom: 8px; }

.legacy-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}
.legacy-tab {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.28);
  color: var(--muted);
  padding: 10px 16px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.legacy-tab.is-on {
  color: #0c0e14;
  background: #f3e6c8;
  border-color: #f3e6c8;
}
.legacy-tab-badge {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(201, 162, 39, 0.25);
  color: #f0d070;
}
.legacy-tab.is-on .legacy-tab-badge {
  background: rgba(0, 0, 0, 0.15);
  color: #5a4200;
}

.legacy-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.legacy-col {
  display: flex;
  flex-direction: column;
  border: 1px solid #242b3d;
  border-radius: 16px;
  background: rgba(11, 13, 20, 0.98);
  overflow: hidden;
  min-width: 0;
  transition: border-color 160ms ease;
}
.legacy-col:hover { border-color: #3b4765; }
.legacy-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid #242b3d;
  background: linear-gradient(90deg, #121624, #171d2f, #121624);
}
.legacy-col-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.legacy-col-head h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.legacy-col-head p {
  margin: 2px 0 0;
  font-size: 11px;
  color: #8a92a6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wow-icon--legacy-tree {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(230, 204, 128, 0.55);
  background: rgba(20, 24, 36, 0.9);
  flex: 0 0 auto;
}
.legacy-col--blue .wow-icon--legacy-tree { border-color: rgba(91, 155, 213, 0.55); }
.legacy-col--green .wow-icon--legacy-tree { border-color: rgba(125, 206, 160, 0.5); }
.legacy-col-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.legacy-col-pts {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #242b3d;
  background: #101422;
  color: #8a92a6;
}
.legacy-col-pts strong { color: #e6cc80; font-weight: 900; }
.legacy-col-reset {
  appearance: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #8a92a6;
  cursor: pointer;
  padding: 0;
}
.legacy-col-reset:hover {
  color: #fff;
  background: #1f273e;
}
.legacy-tier-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid #1c2233;
  background: #08090f;
  font-size: 10px;
  font-weight: 700;
}
.legacy-tier-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #6b7280;
}
.legacy-tier-tab.is-open { color: #34d399; }
.legacy-tier-tab.is-locked { color: #6b7280; }
.legacy-tier-tab.is-locked .legacy-tier-lock { color: rgba(248, 113, 113, 0.85); }
.legacy-tier-tab.is-open .legacy-tier-lock { display: none; }
.legacy-tier-lock { font-size: 10px; line-height: 1; }
.legacy-grid-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 18px 14px 10px;
  background:
    radial-gradient(#182035 1px, transparent 1px) 0 0 / 16px 16px,
    rgba(7, 9, 15, 0.85);
}
.legacy-grid {
  position: relative;
  width: var(--legacy-size, 252px);
  height: var(--legacy-size, 252px);
  display: grid;
  gap: var(--legacy-gap, 20px);
  overflow: visible;
}
.legacy-grid-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, var(--legacy-cell, 48px));
  gap: var(--legacy-gap, 20px);
  align-items: center;
  justify-items: center;
}
/* Connectors sit only in the gutter between adjacent cells */
.legacy-arrow {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  color: #45516d;
}
.legacy-arrow.is-lit { color: #ffd100; }
.legacy-arrow--h {
  left: calc((var(--ac) + 1) * var(--legacy-cell) + var(--ac) * var(--legacy-gap) + 2px);
  top: calc(var(--ar) * (var(--legacy-cell) + var(--legacy-gap)) + var(--legacy-cell) / 2);
  width: calc(var(--legacy-gap) - 12px);
  height: 0;
  border-top: 2px solid currentColor;
  transform: translateY(-1px);
}
.legacy-arrow--h::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent currentColor;
}
.legacy-arrow--v {
  left: calc(var(--ac) * (var(--legacy-cell) + var(--legacy-gap)) + var(--legacy-cell) / 2);
  top: calc((var(--ar) + 1) * var(--legacy-cell) + var(--ar) * var(--legacy-gap) + 2px);
  width: 0;
  height: calc(var(--legacy-gap) - 12px);
  border-left: 2px solid currentColor;
  transform: translateX(-1px);
}
.legacy-arrow--v::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 7px 4px 0 4px;
  border-color: currentColor transparent transparent transparent;
}
.legacy-node-spacer {
  width: var(--legacy-cell, 48px);
  height: var(--legacy-cell, 48px);
}
.legacy-node {
  appearance: none;
  position: relative;
  z-index: 3;
  width: var(--legacy-cell, 48px);
  height: var(--legacy-cell, 48px);
  padding: 2px;
  border: 2px solid #4a5578;
  border-radius: 12px;
  background: #0c0f18;
  /* Mask any sub-pixel connector bleed under the frame */
  box-shadow: 0 0 0 3px #07090f;
  cursor: pointer;
  display: grid;
  place-items: center;
  overflow: visible;
  transition: border-color 140ms ease, opacity 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}
.legacy-node:hover:not(.is-locked) { border-color: #fff; }
.legacy-node.is-available {
  border-color: #4a5578;
}
.legacy-node.is-on {
  border-color: #7eb6ff;
  box-shadow: 0 0 0 1px rgba(126, 182, 255, 0.35), 0 0 14px rgba(80, 140, 220, 0.35);
}
.legacy-node.is-locked {
  border-color: #22293d;
  opacity: 0.4;
  filter: grayscale(1);
  cursor: not-allowed;
}
.legacy-node--slot {
  border-color: #23293a;
  background: #0c0f18;
  opacity: 0.55;
  cursor: default;
  filter: none;
}
.legacy-node-lock {
  font-size: 14px;
  opacity: 0.7;
}
.wow-icon--legacy {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}
.legacy-node-rank {
  position: absolute;
  right: -4px;
  bottom: -5px;
  z-index: 3;
  min-width: 1.7rem;
  padding: 1px 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: #d8dee9;
  background: #0b0f18;
  border: 1px solid #2a3348;
  text-align: center;
}
.legacy-node.is-on .legacy-node-rank {
  color: #7dcea0;
  border-color: rgba(125, 206, 160, 0.45);
}
.legacy-col-foot {
  margin: 0;
  padding: 8px 12px 12px;
  text-align: center;
  font-size: 11px;
  color: #6b7280;
}

.legacy-how {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.legacy-how article {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
}
.legacy-how h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 1.05rem;
  color: #e8d9a8;
}
.legacy-how p { margin: 0; color: var(--muted); font-size: 14px; }
.legacy-mile-title {
  font-family: var(--display);
  color: #e8d9a8;
  font-size: 1.1rem;
}
.legacy-milestones {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 8px;
}
.legacy-mile {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.22);
}
.legacy-mile.is-met {
  color: #e8d9a8;
  border-color: rgba(201, 162, 39, 0.4);
  background: rgba(40, 32, 12, 0.35);
}
.legacy-mile-pts {
  font-family: var(--display);
  font-weight: 700;
  color: #c9a227;
  min-width: 2rem;
}

.legacy-chal-lead { color: var(--muted); margin: 0 0 16px; }
.legacy-chal-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.legacy-chal-group {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.25);
}
.legacy-chal-group h3 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 1rem;
  color: #e8d9a8;
}
.legacy-chal-list {
  display: grid;
  gap: 6px;
  max-height: 320px;
  overflow: auto;
}
.legacy-chal {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  margin: 0;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
}
.legacy-chal.is-on {
  border-color: rgba(201, 162, 39, 0.4);
  background: rgba(40, 32, 12, 0.4);
  color: #f3e6c8;
}

@media (max-width: 980px) {
  .legacy-cols,
  .legacy-how,
  .legacy-chal-board {
    grid-template-columns: 1fr;
  }
  .legacy-hero {
    grid-template-columns: 1fr;
  }
}

/* �� WoW icons (Wowhead CDN, same paths as Eternity) �� */
.wow-icon {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.65);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  background: #0a0a0a;
  flex-shrink: 0;
  image-rendering: auto;
}
.wow-icon--sm { width: 22px; height: 22px; }
.wow-icon--xs { width: 16px; height: 16px; }
.wow-icon--lg { width: 48px; height: 48px; }
.guide-pill--icon {
  gap: 8px;
}
.guide-card--icon {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.rm-race {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
  text-align: left;
  color: inherit;
  text-decoration: none;
}
.rm-race:hover .rm-race-name { color: #fff; }
.rm-race-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.rm-race-name {
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2;
}
.rm-class-h {
  vertical-align: bottom;
  padding-inline: 2px;
}
.rm-class-h .wow-icon {
  width: 28px;
  height: 28px;
  margin: 0 auto 4px;
  display: block;
}
.rm-class-name {
  display: block;
  font-size: 11px;
  letter-spacing: 0.01em;
  font-weight: 700;
  max-width: 100%;
  margin: 0 auto;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.rm-race .wow-icon {
  width: 28px;
  height: 28px;
}
.rm-race-name {
  font-size: 13px;
}
.racial-card header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.racial-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.racial-body { min-width: 0; flex: 1; }
.racial-body p { margin: 6px 0 0; }

.guide-ico-cell { width: 40px; }
.spell-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.spell-detail-head h3,
.spell-detail-head .item-name { margin: 0; }
.wow-icon--talent {
  width: 32px;
  height: 32px;
  margin: 0 auto 4px;
  display: block;
}
.talent-slot {
  align-items: center;
  text-align: center;
}
.talent-slot .talent-name {
  width: 100%;
  text-align: center;
}
.talent-slot .talent-rank { align-self: center; }

/* �� New vs Classic markers �� */
.kind-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  border: 1px solid transparent;
  vertical-align: middle;
}
.kind-badge--new {
  color: #1a1200;
  background: linear-gradient(180deg, #f0d070, #c9a227);
  border-color: rgba(240, 208, 112, 0.8);
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.35);
}
.kind-badge--classic {
  color: #b7eccb;
  background: rgba(36, 72, 48, 0.75);
  border-color: rgba(125, 206, 160, 0.45);
}
.kind-badge--changed {
  color: #cfe6ff;
  background: rgba(30, 64, 110, 0.8);
  border-color: rgba(91, 155, 213, 0.55);
}

.kind-mark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 3.2rem;
  padding: 6px 4px;
  border-radius: 2px;
  line-height: 1.1;
}
.kind-mark-ico { font-size: 14px; font-weight: 700; }
.kind-mark-txt {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.kind-mark--new {
  color: #f0d070;
  background: rgba(201, 162, 39, 0.18);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.55);
}
.kind-mark--classic {
  color: #7dcea0;
  background: rgba(40, 90, 55, 0.22);
  box-shadow: inset 0 0 0 1px rgba(125, 206, 160, 0.4);
}
.kind-mark--na {
  color: #5a5f6c;
  background: rgba(255, 255, 255, 0.03);
}
.guide-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 18px;
}
.rm-cell.is-new { background: rgba(201, 162, 39, 0.1); }
.rm-cell.is-classic { background: rgba(50, 110, 70, 0.08); }
.rm-cell.is-na { opacity: 0.55; }

.racial-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.racial-item--new {
  border-left: 3px solid #c9a227 !important;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.16), rgba(0, 0, 0, 0.18)) !important;
}
.racial-item--classic {
  border-left: 3px solid rgba(125, 206, 160, 0.65) !important;
  background: rgba(0, 0, 0, 0.22);
}
.racial-item--changed {
  border-left: 3px solid #5b9bd5 !important;
  background: linear-gradient(90deg, rgba(91, 155, 213, 0.14), rgba(0, 0, 0, 0.18)) !important;
}

.talent-slot.is-new {
  border-color: rgba(201, 162, 39, 0.75) !important;
  background: rgba(50, 38, 8, 0.55);
  box-shadow: 0 0 0 1px rgba(240, 208, 112, 0.25), 0 0 16px rgba(201, 162, 39, 0.2);
}
.talent-slot.is-classic.has-points {
  border-color: rgba(125, 206, 160, 0.45);
}
.talent-new-tag {
  position: absolute;
  top: 2px;
  right: 2px;
  padding: 1px 5px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1200;
  background: #c9a227;
  line-height: 1.3;
}
.talent-slot { position: relative; }
.row-kind--new td:first-child { box-shadow: inset 3px 0 0 #c9a227; }
.row-kind--changed td:first-child { box-shadow: inset 3px 0 0 #5b9bd5; }

/* Guide hub atlas — surface is full-bleed via #app > main.app-main */
.guide-page--hub {
  width: 100%;
  padding-top: calc(120px + env(safe-area-inset-top, 0px));
}
.guide-hub-hero {
  margin: 0 0 40px;
  padding: 28px 0 8px;
  border-bottom: 1px solid rgba(240, 208, 120, 0.18);
}
.guide-hub-kicker {
  margin: 0 0 8px;
  font-family: "Roboto Condensed", var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.guide-hub-title {
  margin: 0 0 12px;
  font-family: "Cinzel", var(--display);
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 700;
  color: #f6ecd0;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.guide-hub-lead {
  margin: 0;
  max-width: 54ch;
  color: rgba(230, 220, 195, 0.72);
  font-size: 16px;
  line-height: 1.5;
}
.guide-atlas { margin: 28px 0 36px; }
.guide-atlas-head {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}
.guide-atlas-head h2 {
  margin: 0;
  font-family: "Cinzel", var(--display);
  font-size: 1.35rem;
  color: #e8d9a8;
}
.guide-atlas-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.guide-atlas-list {
  display: grid;
  gap: 12px;
}

/* Companion / Guide: compact profession cards (list was one full-width row each). */
.guide-prof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
}
@media (min-width: 600px) {
  .guide-prof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .guide-prof-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  .guide-prof-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.guide-prof-grid .guide-plate {
  height: 100%;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 12px 14px 12px;
  grid-template-columns: none;
}
.guide-prof-grid .guide-plate-index {
  position: absolute;
  top: 10px;
  left: 12px;
  min-width: 0;
  font-size: 11px;
}
.guide-prof-grid .guide-plate-art {
  width: 48px;
  height: 48px;
  margin: 16px auto 0;
  position: relative;
}
.guide-prof-grid .guide-plate-ico { left: 50%; transform: translate(-50%, -50%); }
.guide-prof-grid .guide-plate:hover .guide-plate-ico { transform: translate(-50%, -50%) translateY(-3px); }
.guide-prof-grid .guide-plate-copy {
  text-align: center;
  padding: 0 4px 4px;
  flex: 1;
}
.guide-prof-grid .guide-plate-title {
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  overflow-wrap: anywhere;
}
.guide-prof-grid .guide-plate-body {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 12px;
}
.guide-prof-grid .guide-plate-go {
  align-self: center;
  margin: 0 auto 2px;
}
@media (max-width: 599px) {
  .guide-prof-grid .guide-plate {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "idx copy go" "art copy go";
    align-items: center;
    padding: 12px;
  }
  .guide-prof-grid .guide-plate-index { position: static; grid-area: idx; }
  .guide-prof-grid .guide-plate-art { grid-area: art; margin: 0; width: 44px; height: 44px; }
  .guide-prof-grid .guide-plate-copy { grid-area: copy; text-align: left; padding: 0; }
  .guide-prof-grid .guide-plate-go { grid-area: go; margin: 0; }
}

.guide-atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.guide-hub-card {
  --plate-accent: #c9a227;
  --plate-wash: rgba(201, 162, 39, 0.12);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding: 14px 14px 16px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background:
    linear-gradient(160deg, var(--plate-wash), transparent 55%),
    linear-gradient(180deg, rgba(28, 32, 42, 0.95), rgba(12, 14, 18, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: translateY(8px);
  opacity: 0;
  animation: guide-plate-in 480ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 45ms + 60ms);
  transition: border-color 160ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.guide-hub-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #f0d070, var(--plate-accent));
}
.guide-hub-card:hover {
  border-color: color-mix(in srgb, var(--plate-accent) 55%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.guide-hub-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.guide-hub-card-index {
  font-family: "Cinzel", var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(240, 208, 120, 0.45);
}
.guide-hub-card-art {
  position: relative;
  width: 72px;
  height: 36px;
  flex-shrink: 0;
}
.guide-hub-card-ico {
  position: absolute;
  top: 50%;
  right: calc(var(--n) * 18px);
  transform: translateY(-50%);
  transition: transform 180ms ease;
}
.guide-hub-card-ico .wow-icon {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.guide-hub-card:hover .guide-hub-card-ico { transform: translateY(-50%) translateY(-2px); }
.guide-hub-card:hover .guide-hub-card-ico[style*="--n:1"] { transform: translateY(-50%) translateY(-1px) scale(1.04); }
.guide-hub-card:hover .guide-hub-card-ico[style*="--n:2"] { transform: translateY(-50%) translateY(1px); }
.guide-hub-card-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--plate-accent) 80%, #fff);
}
.guide-hub-card-title {
  font-family: "Cinzel", var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #f3e6c8;
  line-height: 1.2;
}
.guide-hub-card-body {
  color: rgba(210, 205, 190, 0.68);
  font-size: 12.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.guide-hub-card--matrix { --plate-accent: #c9a227; --plate-wash: rgba(201, 162, 39, 0.14); }
.guide-hub-card--racial { --plate-accent: #7dcea0; --plate-wash: rgba(60, 120, 80, 0.18); }
.guide-hub-card--craft { --plate-accent: #d4a574; --plate-wash: rgba(140, 90, 40, 0.18); }
.guide-hub-card--zone { --plate-accent: #6db3a8; --plate-wash: rgba(40, 110, 100, 0.18); }
.guide-hub-card--dungeon { --plate-accent: #e07a5f; --plate-wash: rgba(140, 50, 30, 0.2); }
.guide-hub-card--loot { --plate-accent: #a335ee; --plate-wash: rgba(100, 40, 160, 0.16); }
.guide-hub-card--spell { --plate-accent: #5b9bd5; --plate-wash: rgba(40, 90, 150, 0.2); }
.guide-hub-card--talent { --plate-accent: #f0d070; --plate-wash: rgba(180, 140, 30, 0.16); }
.guide-hub-card--legacy { --plate-accent: #c2b280; --plate-wash: rgba(120, 100, 50, 0.16); }
@media (prefers-reduced-motion: reduce) {
  .guide-hub-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.guide-page:not(.guide-page--hub) .guide-plate {
  opacity: 1;
  transform: none;
  animation: none;
}

.guide-entity-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0 0 22px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(120deg, rgba(201, 162, 39, 0.08), transparent 50%),
    rgba(0, 0, 0, 0.28);
}
.guide-entity-head .wow-icon {
  flex-shrink: 0;
}
.guide-entity-title {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 1.35rem;
  color: #f3e6c8;
}
.guide-entity-desc,
.guide-entity-meta {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  max-width: 70ch;
}
.guide-table--data .guide-ico-cell {
  width: 44px;
  vertical-align: middle;
}
.guide-table--data tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* —— Profession recipes —— */
.recipe-board {
  display: grid;
  gap: 28px;
  margin: 8px 0 28px;
}
.recipe-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.recipe-group-title {
  margin: 0;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  color: #e8dcc0;
  letter-spacing: 0.02em;
}
.recipe-group-count {
  font-size: 12px;
}
.recipe-list {
  display: grid;
  gap: 6px;
}
.recipe-card {
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.025), transparent 42%),
    rgba(14, 17, 24, 0.72);
  animation: recipe-in 0.35s ease both;
  animation-delay: calc(var(--i, 0) * 12ms);
}
@keyframes recipe-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.recipe-card--new {
  box-shadow: inset 3px 0 0 #c9a227;
}
.recipe-card--changed {
  box-shadow: inset 3px 0 0 #5b9bd5;
}
.recipe-card--classic {
  box-shadow: inset 3px 0 0 rgba(125, 206, 160, 0.45);
}
.recipe-card-sum {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.recipe-card-sum::-webkit-details-marker { display: none; }
.recipe-card-sum::marker { content: ""; }
.recipe-card-ico {
  display: flex;
  flex-shrink: 0;
}
.recipe-card-ico .wow-icon {
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}
.recipe-card-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.recipe-card-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: #f2efe6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipe-card-hint {
  display: none;
  font-size: 12px;
}
.recipe-card-skill {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  color: #f0a020;
  min-width: 2ch;
  text-align: right;
}
.recipe-card-badge {
  justify-self: end;
}
.recipe-card-chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(232, 220, 192, 0.55);
  border-bottom: 2px solid rgba(232, 220, 192, 0.55);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
  margin-right: 4px;
}
.recipe-card[open] .recipe-card-chevron {
  transform: rotate(45deg);
  margin-top: -2px;
}
.recipe-card-sum:hover {
  background: rgba(255, 255, 255, 0.03);
}
.recipe-card-body {
  display: grid;
  gap: 14px;
  padding: 4px 14px 14px 54px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.recipe-detail-block { min-width: 0; }
.recipe-detail-label {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232, 220, 192, 0.55);
}
.recipe-detail-text {
  margin: 0;
  font-size: 13px;
  color: #d8d2c4;
  line-height: 1.45;
}
.recipe-detail-link {
  font-size: 12px;
  font-weight: 600;
  color: #c9a227;
  text-decoration: none;
  white-space: nowrap;
  align-self: center;
}
.recipe-detail-link:hover { color: #f0d070; text-decoration: underline; }
.recipe-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.recipe-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.2;
  max-width: 100%;
}
a.recipe-chip:hover {
  border-color: rgba(201, 162, 39, 0.45);
  background: rgba(201, 162, 39, 0.08);
}
.recipe-chip--makes {
  border-color: rgba(201, 162, 39, 0.35);
}
.recipe-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipe-chip-qty {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: rgba(232, 220, 192, 0.7);
  flex-shrink: 0;
}
.recipe-learned-text {
  font-size: 13px;
  color: #d8d2c4;
}
.recipe-skill-ladder {
  display: inline-flex;
  gap: 6px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
}
.recipe-sk {
  min-width: 1.6rem;
  text-align: center;
  padding: 2px 6px;
  border: 1px solid transparent;
}
.recipe-sk--orange {
  color: #1a1200;
  background: #f0a020;
  border-color: #c87800;
}
.recipe-sk--yellow {
  color: #1a1200;
  background: #e8d040;
  border-color: #b8a010;
}
.recipe-sk--green {
  color: #b7eccb;
  background: rgba(36, 72, 48, 0.85);
  border-color: rgba(125, 206, 160, 0.45);
}
.recipe-sk--grey {
  color: #c8c8c8;
  background: rgba(60, 60, 60, 0.85);
  border-color: rgba(160, 160, 160, 0.35);
}
.q-poor .q-name,
.q-poor .item-name { color: #9d9d9d; }
.q-common .q-name,
.q-common .item-name { color: #fff; }
.q-uncommon .q-name,
.q-uncommon .item-name { color: #1eff00; }
.q-rare .q-name,
.q-rare .item-name { color: #0070dd; }
.q-epic .q-name,
.q-epic .item-name { color: #a335ee; }
.q-legendary .q-name,
.q-legendary .item-name { color: #ff8000; }

/* —— Items explorer —— */
.guide-page--items { width: 100%; }
.items-filters {
  margin: 0 0 18px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background:
    linear-gradient(165deg, rgba(28, 32, 42, 0.95), rgba(10, 12, 18, 0.98));
}
.items-filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: end;
}
.items-filters label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--muted-2);
}
.items-search { flex: 1 1 220px; min-width: 180px; }
.items-lv-field { width: 88px; }
.items-filters input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.4);
  color: #eee;
  font: inherit;
}
.items-filters input:focus {
  outline: none;
  border-color: var(--blue-hot);
}
.items-filters .btn { min-height: 40px; }
.items-qchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.items-qchip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.items-qchip:hover { border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.items-qchip.is-on {
  color: #0c0e14;
  background: #f3e6c8;
  border-color: #f3e6c8;
}
.items-qchip.q-poor.is-on { background: #9d9d9d; border-color: #9d9d9d; }
.items-qchip.q-uncommon.is-on { background: #1eff00; border-color: #1eff00; color: #041000; }
.items-qchip.q-rare.is-on { background: #0070dd; border-color: #0070dd; color: #fff; }
.items-qchip.q-epic.is-on { background: #a335ee; border-color: #a335ee; color: #fff; }
.items-qchip.q-legendary.is-on { background: #ff8000; border-color: #ff8000; color: #1a0a00; }
.items-qchip.q-poor:not(.is-on) { color: #9d9d9d; }
.items-qchip.q-uncommon:not(.is-on) { color: #1eff00; }
.items-qchip.q-rare:not(.is-on) { color: #4da3ff; }
.items-qchip.q-epic:not(.is-on) { color: #c77dff; }
.items-qchip.q-legendary:not(.is-on) { color: #ff9a3c; }

.items-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}
.items-pager-actions { display: flex; gap: 8px; }
.items-count { margin: 0 0 12px; font-size: 13px; }

.items-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.item-card {
  --q-accent: #9ca3af;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  min-height: 0;
  padding: 10px 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--q-accent) 14%, transparent), transparent 48%),
    rgba(0, 0, 0, 0.32);
  transition: border-color 140ms ease, transform 140ms ease, background 140ms ease;
  animation: guide-plate-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 18ms);
}
.item-card:hover {
  border-color: color-mix(in srgb, var(--q-accent) 50%, rgba(255,255,255,0.18));
  transform: translateY(-2px);
}
.item-card.q-poor { --q-accent: #9d9d9d; }
.item-card.q-common { --q-accent: #ffffff; }
.item-card.q-uncommon { --q-accent: #1eff00; }
.item-card.q-rare { --q-accent: #0070dd; }
.item-card.q-epic { --q-accent: #a335ee; }
.item-card.q-legendary { --q-accent: #ff8000; }

.item-ico {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 6px;
  background: #0a0c12;
}
.item-ico.q-frame {
  border: 2px solid var(--q-accent, #666);
  box-shadow: 0 0 12px color-mix(in srgb, var(--q-accent) 25%, transparent);
}
.item-card .item-ico { margin-top: 1px; }
.item-card.q-poor .item-ico { border-color: #9d9d9d; }
.item-card.q-common .item-ico { border-color: #c8c8c8; }
.item-card.q-uncommon .item-ico { border-color: #1eff00; }
.item-card.q-rare .item-ico { border-color: #0070dd; }
.item-card.q-epic .item-ico { border-color: #a335ee; }
.item-card.q-legendary .item-ico { border-color: #ff8000; }

.wow-icon--md { width: 36px; height: 36px; }
.wow-icon--xl { width: 56px; height: 56px; }

.item-card-body {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.item-card-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-card-sub {
  font-size: 11px;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 2px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #c8c4bc;
}
.item-card-q {
  margin-left: auto;
  font-weight: 700;
  color: var(--q-accent);
}

.item-chip {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
  color: var(--muted);
}
.item-chip--muted { color: var(--muted-2); }
.item-chip--q { color: inherit; border-color: color-mix(in srgb, var(--q-accent) 40%, transparent); }

.items-back { margin: 0 0 14px; }

.item-detail-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.wow-tt-wrap { min-width: 0; }
.wow-tt-kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fa0c2;
}
.wow-tt {
  --q-accent: #c8c8c8;
  padding: 12px 14px;
  border: 1px solid #1a1f2b;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(20, 24, 36, 0.98), rgba(8, 10, 16, 0.98));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.7),
    0 14px 36px rgba(0, 0, 0, 0.55);
  font-size: 13px;
  line-height: 1.35;
  color: #e4e7eb;
  max-width: 360px;
}
.wow-tt.q-poor { --q-accent: #9d9d9d; }
.wow-tt.q-common { --q-accent: #ffffff; }
.wow-tt.q-uncommon { --q-accent: #1eff00; }
.wow-tt.q-rare { --q-accent: #0070dd; }
.wow-tt.q-epic { --q-accent: #a335ee; }
.wow-tt.q-legendary { --q-accent: #ff8000; }
.wow-tt-name {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--q-accent);
}
.wow-tt-line { margin: 0 0 2px; }
.wow-tt-line--muted { color: #ffd100; }
.wow-tt-line--white { color: #e4e7eb; }
.wow-tt-line--slot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #e4e7eb;
}
.wow-tt-line--effect {
  color: #1eff00;
  margin-top: 4px;
}
.wow-tt-line--effect strong { font-weight: 700; }
.wow-tt-line--flavor {
  margin-top: 6px;
  font-style: italic;
  color: #1eff00;
}
.wow-tt-line--sell { margin-top: 6px; color: #e4e7eb; }

.item-sheet {
  --q-accent: #c8c8c8;
  max-width: none;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--q-accent) 45%, rgba(255,255,255,0.08));
  border-radius: 14px;
  background:
    radial-gradient(ellipse 60% 50% at 0% 0%, color-mix(in srgb, var(--q-accent) 18%, transparent), transparent 55%),
    linear-gradient(165deg, rgba(22, 26, 36, 0.98), rgba(8, 10, 14, 0.98));
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 18px 40px rgba(0,0,0,0.35);
}
.item-sheet.q-poor { --q-accent: #9d9d9d; }
.item-sheet.q-common { --q-accent: #c8c8c8; }
.item-sheet.q-uncommon { --q-accent: #1eff00; }
.item-sheet.q-rare { --q-accent: #0070dd; }
.item-sheet.q-epic { --q-accent: #a335ee; }
.item-sheet.q-legendary { --q-accent: #ff8000; }
.item-sheet-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.item-sheet .item-ico--xl {
  border-color: var(--q-accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--q-accent) 35%, transparent);
}
.item-sheet-quality {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--q-accent);
}
.item-sheet .item-name {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  color: var(--q-accent);
}
.item-sheet-sub { margin: 6px 0 0; font-size: 14px; }
.item-sheet-section {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #c9a227;
}
.item-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.item-facts dt {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.item-facts dd {
  margin: 3px 0 0;
  font-weight: 700;
  color: #f3e6c8;
}
.item-fact--dps { color: #ffd100; }

.item-procs {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(30, 255, 0, 0.22);
  background: rgba(6, 32, 10, 0.45);
}
.item-procs-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c9a227;
}
.item-procs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.item-procs li {
  color: #1eff00;
  font-size: 13px;
  line-height: 1.45;
}
.item-procs strong { font-weight: 700; }

.item-flavor {
  margin: 0 0 16px;
  font-style: italic;
  color: #1eff00;
  font-size: 14px;
}
.item-sheet-foot { display: flex; gap: 10px; flex-wrap: wrap; }
.coin { font-weight: 700; margin-right: 4px; }
.coin--g { color: #ffd100; }
.coin--s { color: #c0c0c0; }
.coin--c { color: #b87333; }

@media (max-width: 900px) {
  .item-detail-layout { grid-template-columns: 1fr; }
  .wow-tt { max-width: none; }
}
@media (max-width: 720px) {
  .items-board {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
  }
  .item-card { padding: 8px 10px; gap: 8px; }
  .item-card-name { font-size: 0.88rem; }
  .items-filters-row .btn {
    width: 100%;
  }
}
.guide-plate {
  --plate-accent: #c9a227;
  --plate-wash: rgba(201, 162, 39, 0.1);
  position: relative;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 16px 18px;
  min-height: 108px;
  padding: 16px 18px 16px 14px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(105deg, var(--plate-wash), transparent 42%),
    linear-gradient(180deg, rgba(28, 32, 42, 0.95), rgba(12, 14, 18, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transform: translateY(8px);
  opacity: 0;
  animation: guide-plate-in 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 55ms + 80ms);
  transition:
    border-color 160ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}
.guide-plate::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #f0d070, var(--plate-accent));
}
.guide-plate:hover {
  border-color: color-mix(in srgb, var(--plate-accent) 55%, transparent);
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.guide-plate-index {
  font-family: "Cinzel", var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(240, 208, 120, 0.45);
  min-width: 1.8rem;
}
.guide-plate-art {
  position: relative;
  width: 86px;
  height: 56px;
  flex-shrink: 0;
}
.guide-plate-ico {
  position: absolute;
  top: 50%;
  left: calc(var(--n) * 22px);
  transform: translateY(-50%);
  transition: transform 180ms ease;
}
.guide-plate-ico .wow-icon {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.guide-plate:hover .guide-plate-ico { transform: translateY(-50%) translateY(-3px); }
.guide-plate:hover .guide-plate-ico[style*="--n:1"] { transform: translateY(-50%) translateY(-1px) scale(1.04); }
.guide-plate:hover .guide-plate-ico[style*="--n:2"] { transform: translateY(-50%) translateY(2px); }
.guide-plate-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.guide-plate-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--plate-accent) 80%, #fff);
}
.guide-plate-title {
  font-family: "Cinzel", var(--display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 700;
  color: #f3e6c8;
  line-height: 1.15;
}
.guide-plate-body {
  color: rgba(210, 205, 190, 0.7);
  font-size: 13.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.guide-plate-go {
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(240, 208, 120, 0.55);
  border-bottom: 2px solid rgba(240, 208, 120, 0.55);
  transform: rotate(-45deg);
  transition: transform 160ms ease, border-color 160ms ease;
}
.guide-plate:hover .guide-plate-go {
  transform: rotate(-45deg) translate(3px, 3px);
  border-color: #f0d070;
}

.guide-plate--matrix { --plate-accent: #c9a227; --plate-wash: rgba(201, 162, 39, 0.14); }
.guide-plate--racial { --plate-accent: #7dcea0; --plate-wash: rgba(60, 120, 80, 0.18); }
.guide-plate--craft { --plate-accent: #d4a574; --plate-wash: rgba(140, 90, 40, 0.18); }
.guide-plate--zone { --plate-accent: #6db3a8; --plate-wash: rgba(40, 110, 100, 0.18); }
.guide-plate--dungeon { --plate-accent: #e07a5f; --plate-wash: rgba(140, 50, 30, 0.2); }
.guide-plate--loot { --plate-accent: #a335ee; --plate-wash: rgba(100, 40, 160, 0.16); }
.guide-plate--spell { --plate-accent: #5b9bd5; --plate-wash: rgba(40, 90, 150, 0.2); }
.guide-plate--talent { --plate-accent: #f0d070; --plate-wash: rgba(180, 140, 30, 0.16); }
.guide-plate--legacy { --plate-accent: #c2b280; --plate-wash: rgba(120, 100, 50, 0.16); }

@keyframes guide-plate-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-plate {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 720px) {
  .guide-plate {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "idx copy go"
      "art copy go";
  }
  .guide-plate-index { grid-area: idx; }
  .guide-plate-art { grid-area: art; width: 78px; height: 48px; }
  .guide-plate-copy { grid-area: copy; }
  .guide-plate-go { grid-area: go; }
  .guide-plate-ico .wow-icon { width: 36px; height: 36px; }
}

/* ── Guide / Tools mobile ── */
@media (max-width: 900px) {
  .guide-page,
  .guide-page--hub {
    width: 100%;
    padding: calc(80px + env(safe-area-inset-top, 0px)) max(16px, var(--page)) 48px;
  }
  .guide-hub-title {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }
  .guide-hub-lead,
  .guide-lead {
    font-size: 14px;
    max-width: none;
  }
  .guide-grid {
    grid-template-columns: 1fr;
  }
  .guide-card--icon {
    gap: 12px;
  }
  .guide-pill-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    gap: 8px;
    margin-inline: calc(-1 * max(16px, var(--page)));
    padding: 2px max(16px, var(--page)) 10px;
    scroll-snap-type: x proximity;
  }
  .guide-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 13px;
  }
  .guide-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .guide-filters label { min-width: 0; }
  .guide-filters input,
  .guide-filters select {
    width: 100%;
    min-width: 0;
    min-height: 42px;
  }
  .guide-filters .btn,
  .guide-filters button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
  }
  .guide-table-wrap:not(.guide-table-wrap--desktop) {
    margin-inline: calc(-1 * max(16px, var(--page)));
    padding-inline: max(16px, var(--page));
    -webkit-overflow-scrolling: touch;
  }
  .guide-table-wrap--desktop {
    display: none;
  }
  .recipe-board { gap: 22px; }
  .recipe-card-sum {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 8px 10px;
    padding: 11px 10px;
    min-height: 48px;
  }
  .recipe-card-skill { display: none; }
  .recipe-card-hint { display: block; }
  .recipe-card-name { white-space: normal; font-size: 13px; }
  .recipe-card-body {
    padding: 10px 12px 14px;
    gap: 12px;
  }
  .recipe-card-chevron { grid-column: 4; }
  .recipe-card-badge { grid-column: 3; }
  .rm-mobile {
    display: grid;
    gap: 12px;
    margin: 0 0 20px;
  }
  .rm-mobile-card {
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
    background:
      linear-gradient(160deg, rgba(201, 162, 39, 0.08), transparent 50%),
      rgba(18, 22, 30, 0.94);
  }
  .rm-mobile-race {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* taste-skill-ignore */
    text-decoration: none;
    color: inherit;
    min-width: 0;
  }
  .rm-mobile-race:hover { color: #fff; }
  .rm-mobile-race .wow-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
  }
  .rm-mobile-race .rm-race-name {
    display: block;
    font-family: "Cinzel", var(--display);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.2;
  }
  .rm-mobile-race .rm-faction {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--muted);
  }
  .rm-mobile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .rm-mobile-cell {
    display: grid;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    padding: 8px 4px 7px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06); /* taste-skill-ignore */
    text-align: center;
  }
  .rm-mobile-cell .wow-icon {
    width: 28px;
    height: 28px;
  }
  .rm-mobile-mark {
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
  }
  .rm-mobile-class {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rm-mobile-cell.is-new {
    border-color: rgba(201, 162, 39, 0.45);
    background: rgba(201, 162, 39, 0.14);
  }
  .rm-mobile-cell.is-new .rm-mobile-mark { color: #f0d070; }
  .rm-mobile-cell.is-classic {
    border-color: rgba(125, 206, 160, 0.4);
    background: rgba(40, 90, 55, 0.2);
  }
  .rm-mobile-cell.is-classic .rm-mobile-mark { color: #7dcea0; }
  .rm-mobile-cell.is-na {
    opacity: 0.55;
  }
  .rm-mobile-cell.is-na .rm-mobile-mark { color: #6a7080; }
  .guide-legend {
    gap: 8px;
    font-size: 12px;
  }
  .talent-toolbar {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
  }
  .talent-toolbar .btn {
    min-height: 42px;
    flex: 1 1 auto;
  }
  .talent-tree {
    padding: 12px 10px 14px;
  }
  .talent-grid {
    gap: 5px;
  }
  .talent-slot {
    min-height: 72px;
    padding: 6px 3px;
  }
  .talent-tip {
    max-width: none;
    position: sticky;
    bottom: 12px;
    z-index: 4;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .legacy-chal {
    padding: 12px;
    min-height: 44px;
  }
  .legacy-chal-list {
    max-height: min(50vh, 360px);
  }
  .legacy-grid-wrap { padding: 14px 8px 8px; }
  .item-stats {
    grid-template-columns: 1fr 1fr;
  }
  .nav-drawer-group .group {
    margin-top: 14px;
  }
  .nav-drawer-group .group:first-child {
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  .guide-page,
  .guide-page--hub {
    padding-top: calc(72px + env(safe-area-inset-top, 0px));
    padding-bottom: 40px;
  }
  .guide-head { margin-bottom: 20px; }
  .guide-head h1 {
    font-size: clamp(1.55rem, 7.5vw, 1.9rem);
  }
  .guide-plate {
    min-height: 0;
    gap: 10px 12px;
    padding: 14px 12px 14px 12px;
  }
  .guide-plate-body {
    font-size: 13px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
  .guide-plate-go {
    font-size: 12px;
  }
  .guide-filters {
    grid-template-columns: 1fr;
  }
  .guide-table {
    font-size: 13px;
  }
  .guide-table th,
  .guide-table td {
    padding: 8px 6px;
  }
  .rm-race-text .rm-faction {
    display: none;
  }
  .rm-mobile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .racial-card header {
    gap: 10px;
  }
  .racial-list li {
    gap: 10px;
    padding: 10px 8px;
  }
  .talent-slot .talent-name {
    display: none;
  }
  .talent-slot {
    min-height: 56px;
    justify-content: center;
    gap: 4px;
  }
  .wow-icon--talent {
    width: 36px;
    height: 36px;
    margin-bottom: 0;
  }
  .talent-rank {
    font-size: 12px;
    font-weight: 700;
  }
  .talent-new-tag {
    font-size: 7px;
    padding: 1px 3px;
  }
  .legacy-hero {
    padding: 16px;
  }
  .legacy-stat strong {
    font-size: 1.35rem;
  }
  .legacy-tier-bar {
    flex-wrap: wrap;
    justify-content: center;
  }
  .item-stats {
    grid-template-columns: 1fr;
  }
  .spell-detail,
  .item-detail {
    padding: 12px;
  }
}

@media (max-width: 380px) {
  .rm-mobile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .rm-mobile-cell {
    padding: 6px 2px;
  }
  .rm-mobile-class { font-size: 9px; }
  .guide-pill span {
    max-width: 7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* —— Zones leveling atlas (Eternity-parity) —— */
.guide-page--zones { width: min(1180px, 100%); }

/* —— Zone Forever (Eternity-style territories panel) —— */
.zf-panel {
  margin: 8px 0 36px;
  padding: 22px 22px 26px;
  border-radius: 18px;
  border: 1px solid rgba(255, 209, 0, 0.22);
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(255, 209, 0, 0.07), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 20%, rgba(1, 124, 170, 0.12), transparent 50%),
    linear-gradient(165deg, #0c121c 0%, #080b12 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.zf-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
}
.zf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #6ee7b7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.zf-kicker-ico { opacity: 0.85; }
.zf-title {
  margin: 0 0 6px;
  font-family: var(--font-display, Cinzel, serif);
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: 0.02em;
}
.zf-lead {
  margin: 0;
  max-width: 52ch;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.5;
}
.zf-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.zf-tab {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid #2a354c;
  background: rgba(12, 18, 28, 0.85);
  color: #e2e8f0;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.zf-tab:hover { border-color: #4a5a78; color: #fff; }
.zf-tab.is-on {
  background: #ffd100;
  border-color: #ffd100;
  color: #0a0c10;
}

.zf-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #1e293b;
  background: #0a0f18;
  min-height: 320px;
}
.zf-card[hidden] { display: none; }
.zf-media {
  position: relative;
  min-height: 280px;
  background: #05070c;
}
.zf-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.zf-media-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(10, 15, 24, 0.55) 100%);
  pointer-events: none;
}
.zf-media-badge {
  position: absolute;
  z-index: 1;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  max-width: min(220px, 70%);
}
.zf-media-badge--preview {
  left: 12px;
  bottom: 12px;
  background: rgba(0, 0, 0, 0.72);
  color: #fcd34d;
  border: 1px solid rgba(252, 211, 77, 0.35);
}
.zf-media-badge--level {
  right: 12px;
  bottom: 12px;
  background: #ffd100;
  color: #0a0c10;
}
.zf-copy {
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zf-loc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #ffd100;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.zf-pin {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd100;
  box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.2);
  flex-shrink: 0;
}
.zf-name {
  margin: 0;
  font-family: var(--font-display, Cinzel, serif);
  font-size: clamp(1.5rem, 2.2vw, 1.85rem);
  color: #fff;
  line-height: 1.15;
}
.zf-tag {
  margin: 0;
  color: #fcd34d;
  font-size: 14px;
  font-weight: 600;
}
.zf-body {
  margin: 2px 0 0;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.55;
}
.zf-bullets {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.zf-bullets li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: #e2e8f0;
  font-size: 13.5px;
  line-height: 1.4;
}
.zf-check {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 42%, #10b981 42% 58%, transparent 58%),
    linear-gradient(45deg, transparent 55%, #10b981 55% 72%, transparent 72%),
    rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.55);
  box-sizing: border-box;
}
.zf-meta {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding-top: 12px;
  border-top: 1px solid #1e293b;
  font-size: 12.5px;
}
.zf-meta div { display: grid; gap: 2px; }
.zf-meta dt { color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; font-weight: 700; }
.zf-meta dd { margin: 0; color: #e2e8f0; }
.zf-meta-lvl { color: #fcd34d !important; font-weight: 650; }

.zf-overhaul {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 209, 0, 0.14);
}
.zf-oh-kicker {
  margin: 0 0 4px;
  color: #ffd100;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.zf-oh-lead {
  margin: 0 0 14px;
  color: #94a3b8;
  font-size: 13px;
  max-width: 62ch;
}
.zf-oh-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.zf-oh-tile { margin: 0; }
.zf-oh-hit {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid #243044;
  border-radius: 12px;
  overflow: hidden;
  background: #070a10;
  cursor: pointer;
  aspect-ratio: 16 / 10;
}
.zf-oh-hit img,
.zf-oh-hit video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease, transform 0.35s ease;
}
.zf-oh-hit:hover img { transform: scale(1.04); }
.zf-oh-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 18px 10px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

@media (max-width: 960px) {
  .zf-card { grid-template-columns: 1fr; }
  .zf-media { min-height: 220px; }
  .zf-media-veil { background: linear-gradient(0deg, rgba(10, 15, 24, 0.55), transparent 45%); }
  .zf-oh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .zf-panel { padding: 16px 14px 18px; }
  .zf-oh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zf-tabs { width: 100%; }
  .zf-tab { flex: 1 1 auto; text-align: center; }
}
.guide-section--forever-zones { margin-bottom: 22px; }

.zt-atlas {
  margin: 8px 0 28px;
  border: 2px solid rgba(201, 162, 39, 0.4);
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #121827 0%, #0c101a 45%, #07090e 100%);
  box-shadow: 0 0 35px rgba(245, 158, 11, 0.12);
}
.zt-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 20px;
  border-bottom: 1px solid #212b41;
  background: rgba(14, 20, 34, 0.9);
}
.zt-head-main { display: flex; gap: 12px; align-items: center; }
.zt-compass {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.12);
  color: #ffd100;
  font-size: 18px;
}
.zt-kicker-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 4px; }
.zt-kicker {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fbbf24; padding: 2px 8px; border-radius: 6px;
  border: 1px solid rgba(245, 158, 11, 0.25); background: rgba(245, 158, 11, 0.1);
}
.zt-kicker-sub { font-size: 12px; color: #8fa0c2; }
.zt-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  color: #fff;
  letter-spacing: -0.02em;
}
.zt-head-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.zt-search input {
  min-width: 200px; min-height: 34px;
  padding: 6px 12px 6px 12px;
  border-radius: 12px;
  border: 1px solid #232f48;
  background: #090d18;
  color: #fff;
  font: inherit; font-size: 12px;
}
.zt-search input:focus { outline: none; border-color: rgba(251, 191, 36, 0.55); }
.zt-select-wrap { position: relative; }
.zt-select-btn {
  min-width: 160px; min-height: 34px;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid #232f48;
  background: #090d18;
  color: #cbd5e1;
  font: inherit; font-size: 12px; font-weight: 600;
  text-align: left; cursor: pointer;
}
.zt-select-btn:hover { background: #111728; color: #fff; }
.zt-select-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  width: 260px; max-height: 320px; overflow: auto;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid #26334d;
  background: #0c101c;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}
.zt-select-opt {
  display: flex; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 10px;
  border: 0; border-radius: 8px;
  background: transparent; color: #e2e8f0;
  font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.zt-select-opt span { color: #64748b; }
.zt-select-opt:hover, .zt-select-opt.is-on { background: rgba(245, 158, 11, 0.12); color: #ffd100; }

.zt-filters {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  align-items: center; justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(26, 35, 54, 0.8);
}
.zt-seg {
  display: inline-flex; flex-wrap: wrap; gap: 2px;
  padding: 3px; border-radius: 12px;
  border: 1px solid #20293d; background: #090d18;
}
.zt-seg-btn {
  padding: 6px 10px; border: 0; border-radius: 8px;
  background: transparent; color: #8fa0c2;
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.zt-seg-btn:hover { color: #fff; }
.zt-seg-btn.is-on {
  background: rgba(245, 158, 11, 0.25); color: #ffd100;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.zt-seg-btn--alliance.is-on { color: #93c5fd; background: rgba(59, 130, 246, 0.22); }
.zt-seg-btn--horde.is-on { color: #fca5a5; background: rgba(239, 68, 68, 0.2); }
.zt-seg-btn--contested.is-on { color: #c4b5fd; background: rgba(139, 92, 246, 0.2); }
.zt-hint { margin: 0; font-size: 12px; max-width: 42ch; }

.zt-levelbar {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  align-items: center; justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid #1b2336;
  background: #090d16;
}
.zt-levelbar-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; font-size: 12px; }
.zt-level-label { color: #94a3b8; }
.zt-levelbar-meta strong { color: #ffd100; font-size: 13px; }
.zt-level-stats { color: #8fa0c2; }
.zt-lvl-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.zt-lvl-chip {
  min-width: 34px; padding: 5px 8px;
  border-radius: 8px; border: 1px solid #232f48;
  background: #0c1220; color: #94a3b8;
  font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.zt-lvl-chip:hover { color: #fff; border-color: #3a4a6a; }
.zt-lvl-chip.is-on {
  color: #0a0c10; background: #ffd100; border-color: #ffd100;
}

.zt-detail-slot:empty { display: none; }
.zt-detail {
  margin: 14px 20px 0;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(201, 162, 39, 0.45);
  background:
    radial-gradient(ellipse 70% 80% at 0% 0%, rgba(91, 155, 213, 0.12), transparent 55%),
    linear-gradient(165deg, rgba(18, 24, 40, 0.98), rgba(8, 10, 16, 0.98));
}
.zt-detail-head { position: relative; padding-right: 36px; }
.zt-detail-close {
  position: absolute; top: 0; right: 0;
  width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: rgba(255,255,255,0.06); color: #94a3b8;
  font-size: 18px; line-height: 1; cursor: pointer;
}
.zt-detail-close:hover { color: #fff; background: rgba(255,255,255,0.12); }
.zt-detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.zt-chip {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12); color: #cbd5e1; background: rgba(0,0,0,0.25);
}
.zt-chip--alliance { color: #93c5fd; border-color: rgba(59,130,246,0.45); background: rgba(30,58,120,0.35); }
.zt-chip--horde { color: #fca5a5; border-color: rgba(239,68,68,0.45); background: rgba(80,20,20,0.35); }
.zt-chip--contested { color: #c4b5fd; border-color: rgba(139,92,246,0.45); background: rgba(50,30,90,0.35); }
.zt-chip--lvl { color: #ffd100; border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.12); }
.zt-detail-title {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: #fff;
}
.zt-detail-summary { margin: 0 0 12px; color: #a8b4c8; font-size: 14px; line-height: 1.5; }
.zt-detail-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.zt-detail-tab {
  padding: 7px 12px; border-radius: 10px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  background: transparent; color: #e8d9a8;
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.zt-detail-tab.is-on, .zt-detail-tab:hover {
  background: rgba(245, 158, 11, 0.15); border-color: rgba(245, 158, 11, 0.55); color: #ffd100;
}
.zt-detail-body { margin-top: 12px; }
.zt-strategy {
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(91, 155, 213, 0.25);
  background: rgba(20, 40, 70, 0.35);
}
.zt-strategy-kicker {
  margin: 0 0 6px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: #ffd100;
}
.zt-strategy p:last-child { margin: 0; color: #e8e6e0; font-size: 14px; line-height: 1.55; }
.zt-hub-list, .zt-dungeon-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.zt-hub-list li, .zt-dungeon-list li {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline;
  padding: 8px 10px; border-radius: 8px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.06);
}
.zt-hub-tags { display: inline-flex; gap: 6px; }
.zt-hub-tags em {
  font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: #8fa0c2;
  padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.1);
}

.zt-board { padding: 12px 16px 16px; }
.zt-axis {
  position: relative; height: 22px; margin: 0 0 4px;
  font-size: 10px; color: #64748b; font-weight: 700;
}
.zt-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.zt-tick i {
  display: block; width: 1px; height: 6px; background: #334155;
}
.zt-tick em { font-style: normal; margin-top: 2px; }

.zt-track {
  position: relative;
  min-height: calc(var(--lanes, 8) * 34px + 8px);
  padding: 4px 0 8px;
  border-radius: 12px;
  border: 1px solid #1c2538;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%),
    #0a0e18;
  cursor: crosshair;
  user-select: none;
  overflow-x: auto;
}
.zt-gridline {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(35, 45, 66, 0.35); pointer-events: none;
}
.zt-marker {
  position: absolute; top: 0; bottom: 0; z-index: 5;
  width: 0; border-left: 2px solid #ffd100;
  box-shadow: 0 0 12px rgba(255, 209, 0, 0.7);
  pointer-events: none; transform: translateX(-1px);
}
.zt-marker em {
  position: absolute; top: 4px; left: 6px;
  font-style: normal; font-size: 10px; font-weight: 800;
  color: #ffd100; white-space: nowrap;
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
}
.zt-lanes {
  --lanes: 8;
  position: relative;
  min-height: calc(var(--lanes) * 34px);
}
.zt-lane {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--row) * 34px);
  height: 34px;
}
.zt-bar {
  position: absolute;
  top: 2px; bottom: 2px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  font: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer; overflow: hidden;
  text-align: left;
  transition: filter 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.zt-bar:hover { filter: brightness(1.18); z-index: 2; }
.zt-bar.is-on {
  outline: 2px solid #ffd100;
  outline-offset: 0;
  z-index: 3;
  box-shadow: 0 0 14px rgba(255, 209, 0, 0.35);
}
.zt-bar-ico { flex-shrink: 0; display: grid; place-items: center; }
.zt-bar-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zt-bar-lvl { flex-shrink: 0; opacity: 0.9; font-variant-numeric: tabular-nums; }

/* Faction default (no player level) */
.zt-bar--alliance { color: #93c5fd; background: #172554; border-color: rgba(59,130,246,0.45); }
.zt-bar--horde { color: #fca5a5; background: rgba(127, 29, 29, 0.85); border-color: rgba(239,68,68,0.4); }
.zt-bar--contested { color: #c4b5fd; background: #1e1b4b; border-color: rgba(139,92,246,0.4); }

/* Difficulty tones */
.zt-bar--range { color: #fcd34d; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.4); }
.zt-bar--trivial { color: #a1a1aa; background: rgba(39, 39, 42, 0.55); border-color: rgba(63, 63, 70, 0.5); }
.zt-bar--easy { color: #34d399; background: rgba(6, 78, 59, 0.45); border-color: rgba(16, 185, 129, 0.4); }
.zt-bar--optimal {
  color: #fcd34d; background: rgba(245, 158, 11, 0.22); border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}
.zt-bar--challenging { color: #fb923c; background: rgba(124, 45, 18, 0.45); border-color: rgba(249, 115, 22, 0.4); }
.zt-bar--deadly { color: #f87171; background: rgba(127, 29, 29, 0.45); border-color: rgba(239, 68, 68, 0.4); }

.zt-foot { margin: 10px 2px 6px; font-size: 12px; }
.zt-legend {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
}
.zt-leg {
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px; border: 1px solid transparent;
}
.zt-leg--trivial { color: #a1a1aa; border-color: rgba(63,63,70,0.5); background: rgba(39,39,42,0.4); }
.zt-leg--easy { color: #34d399; border-color: rgba(16,185,129,0.4); background: rgba(6,78,59,0.35); }
.zt-leg--optimal { color: #fcd34d; border-color: rgba(251,191,36,0.5); background: rgba(245,158,11,0.18); }
.zt-leg--challenging { color: #fb923c; border-color: rgba(249,115,22,0.4); background: rgba(124,45,18,0.35); }
.zt-leg--deadly { color: #f87171; border-color: rgba(239,68,68,0.4); background: rgba(127,29,29,0.35); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (max-width: 720px) {
  .zt-head, .zt-filters, .zt-levelbar, .zt-board { padding-left: 12px; padding-right: 12px; }
  .zt-detail { margin-left: 12px; margin-right: 12px; }
  .zt-search input { min-width: 140px; width: 100%; }
  .zt-bar-name { font-size: 10px; }
  .zt-bar-lvl { display: none; }
}

/* —— Site-wide mobile layout polish —— */
@media (max-width: 720px) {
  :root { --page: 14px; }

  .hero,
  .hero-media,
  .app-frame,
  .app-main,
  .forum-main,
  .panel-main,
  .guide-page,
  .site-footer {
    max-width: 100%;
    overflow-x: clip;
  }
  .hero { overflow: hidden; }
  .hero-media img {
    width: 100%;
    max-width: none;
  }

  .app-main,
  .forum-main {
    padding-left: var(--page);
    padding-right: var(--page);
    padding-bottom: 48px;
  }

  .forum-top {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 14px;
  }
  .forum-title {
    font-size: clamp(24px, 8vw, 32px);
  }
  .forum-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 4px;
    padding: 4px;
  }
  .forum-tabs.realm-filter-tabs {
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  }
  .forum-tab {
    justify-content: center;
    min-height: 38px;
    padding: 0 8px;
    font-size: 11px;
    letter-spacing: 0.05em;
    text-align: center;
  }

  .ff-ribbon {
    margin-left: var(--page);
    margin-right: var(--page);
  }
  .ff-ribbon-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 12px;
    padding: 16px 14px;
  }
  .ff-ribbon-inner .btn {
    grid-column: auto;
    justify-self: stretch;
    width: 100%;
  }
  .ff-ribbon-lead { font-size: 13px; }

  .section {
    padding: 48px var(--page);
  }
  .site-footer {
    padding: 40px var(--page) 24px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .auth-card {
    margin: 24px auto 32px;
    padding: 24px 18px 22px;
    width: min(440px, 100%);
  }
  .page-bg-auth {
    padding: 88px var(--page) 40px;
    align-items: start;
  }
  .auth-card h1 {
    font-size: 24px;
  }

  .panel-mfa-qr {
    max-width: 100%;
  }
  .panel-mfa-qr img {
    width: min(180px, 70vw);
    height: auto;
    aspect-ratio: 1;
  }
  .panel-mfa-secret {
    word-break: break-all;
    overflow-wrap: anywhere;
  }

  .shell-game-logo img {
    height: 56px;
    max-width: min(168px, 44vw);
  }
  .shell-mobile-nav a span {
    font-size: 8px;
    letter-spacing: 0.04em;
  }
  .shell-mobile-end {
    padding: 0 4px 0 2px;
  }
  .shell-mobile-account,
  .burger {
    width: 38px;
    height: 38px;
  }

  .guide-atlas-grid,
  .guide-hub-card,
  .items-board {
    min-width: 0;
  }
  .guide-page,
  .guide-page--hub {
    padding-left: var(--page);
    padding-right: var(--page);
  }

  pre,
  code,
  .panel-mfa-codes,
  .wow-tt,
  table {
    max-width: 100%;
  }
  pre {
    overflow-x: auto;
  }

  .btn,
  .shell-cta,
  .forum-tab,
  .panel-nav-item {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 380px) {
  .shell-mobile-nav a span { display: none; }
  .shell-mobile-nav .icon {
    width: 1.4em;
    height: 1.4em;
  }
  .panel-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .forum-tabs {
    grid-template-columns: 1fr 1fr;
  }
}

/* ------------------------------------------------------------------ changelog */
.cl-page {
  width: min(920px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) var(--page) clamp(56px, 8vw, 96px);
}
.cl-hero {
  margin-bottom: clamp(28px, 4vw, 40px);
}
.cl-kicker {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.cl-title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(240, 208, 120, 0.22);
}
.cl-lead {
  margin: 0 0 22px;
  max-width: 46rem;
  color: var(--muted);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.65;
}
.cl-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cl-toc-link {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid rgba(240, 208, 120, 0.22);
  border-radius: var(--radius);
  background: rgba(28, 31, 39, 0.85);
  color: #e8dfc4;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.cl-toc-link:hover {
  border-color: rgba(240, 208, 120, 0.55);
  color: #fff;
  background: rgba(35, 38, 47, 0.95);
}
.cl-stream {
  display: grid;
  gap: 0;
}
.cl-entry {
  scroll-margin-top: 88px;
  padding: 8px 0 4px;
}
.cl-entry-head {
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(167, 124, 26, 0.45);
}
.cl-date {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffd36a;
}
.cl-block {
  margin: 0 0 18px;
}
.cl-cat {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7fc4ff;
}
.cl-list {
  margin: 0;
  padding: 12px 16px 12px 34px;
  list-style: disc;
  background: rgba(20, 24, 34, 0.78);
  border: 1px solid rgba(42, 49, 66, 0.95);
  border-left: 3px solid #8a6d1f;
  border-radius: 6px;
  color: #d9d2c0;
}
.cl-list > li {
  margin: 5px 0;
}
.cl-list > li::marker {
  color: var(--gold);
}
.cl-list strong {
  color: #fff0c2;
  font-weight: 700;
}
.cl-list code {
  background: #1d2333;
  color: #9fe08f;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}
.cl-list--nested {
  margin: 6px 0 2px;
  padding: 4px 0 0 20px;
  background: none;
  border: none;
  border-radius: 0;
}
.cl-list--nested > li::marker {
  color: rgba(240, 208, 120, 0.65);
}
.cl-rule {
  border: 0;
  height: 1px;
  margin: 28px 0;
  background: linear-gradient(90deg, transparent, #8a6d1f, transparent);
}
.cl-back {
  margin: 36px 0 0;
}
@media (max-width: 640px) {
  .cl-list {
    padding-left: 28px;
  }
}


.cl-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.cl-filter-btn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(240, 208, 120, 0.28);
  border-radius: var(--radius);
  background: rgba(28, 31, 39, 0.85);
  color: #e8dfc4;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.cl-filter-btn:hover {
  border-color: rgba(240, 208, 120, 0.55);
  color: #fff;
}
.cl-filter-btn[aria-pressed="true"] {
  color: #1a1206;
  background: linear-gradient(180deg, #f0d078, #c9a03a);
  border-color: #8a6414;
}
.cl-filter-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.cl-area {
  margin: 0 0 22px;
  padding: 14px 16px 6px;
  border: 1px solid rgba(240, 208, 120, 0.22);
  border-radius: 6px;
  background: rgba(16, 18, 24, 0.35);
}
.cl-area-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.cl-area-title .icon {
  width: 1.05em;
  height: 1.05em;
  color: var(--gold);
  flex: none;
}
.cl-page[data-cl-filter="game"] .cl-area:not([data-area="game"]),
.cl-page[data-cl-filter="site"] .cl-area:not([data-area="site"]),
.cl-page[data-cl-filter="launcher"] .cl-area:not([data-area="launcher"]) {
  display: none;
}
.cl-page[data-cl-filter="game"] .cl-entry:not([data-has-game]),
.cl-page[data-cl-filter="site"] .cl-entry:not([data-has-site]),
.cl-page[data-cl-filter="launcher"] .cl-entry:not([data-has-launcher]),
.cl-page[data-cl-filter="game"] .cl-toc-link:not([data-has-game]),
.cl-page[data-cl-filter="site"] .cl-toc-link:not([data-has-site]),
.cl-page[data-cl-filter="launcher"] .cl-toc-link:not([data-has-launcher]) {
  display: none;
}
.cl-page[data-cl-filter="game"] .cl-rule,
.cl-page[data-cl-filter="site"] .cl-rule,
.cl-page[data-cl-filter="launcher"] .cl-rule {
  /* rules between hidden entries remain; acceptable */
}


.cl-date-nav {
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
  max-width: 22rem;
}
.cl-date-label {
  font-family: "Cinzel", var(--display), serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.cl-date-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 44px;
  padding: 8px 36px 8px 14px;
  border: 1px solid rgba(240, 208, 120, 0.45);
  border-radius: var(--radius);
  background-color: rgba(16, 18, 24, 0.92);
  background-image:
    linear-gradient(45deg, transparent 50%, #c9a227 50%),
    linear-gradient(135deg, #c9a227 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: #ffd36a;
  font-family: "Cinzel", var(--display), serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color-scheme: dark;
  cursor: pointer;
}
.cl-date-select option {
  background: #12151c;
  color: #eee;
}
.cl-date-select:hover {
  border-color: rgba(240, 208, 120, 0.75);
}
.cl-date-select:focus,
.cl-date-select:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(240, 208, 120, 0.28);
}
.cl-date-nav .wf-select-trigger {
  min-height: 44px;
  border-color: rgba(240, 208, 120, 0.45);
  background: rgba(16, 18, 24, 0.92);
  color: #ffd36a;
  font-family: "Cinzel", var(--display), serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.cl-date-nav .wf-select-trigger:hover {
  border-color: rgba(240, 208, 120, 0.75);
  color: #ffe6a0;
}
.cl-date-nav .wf-select.is-open .wf-select-trigger,
.cl-date-nav .wf-select-trigger:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(240, 208, 120, 0.28);
}
.cl-date-nav .wf-select-menu {
  border-color: rgba(240, 208, 120, 0.35);
  background: linear-gradient(180deg, #1c1a14, #12110c);
}
.cl-date-nav .wf-select-option {
  font-family: "Cinzel", var(--display), serif;
  font-weight: 600;
  color: #e8dfc4;
}
.cl-date-nav .wf-select-option:hover,
.cl-date-nav .wf-select-option:focus-visible {
  background: rgba(240, 208, 120, 0.16);
  color: #fff6d4;
}
.cl-date-nav .wf-select-option.is-on {
  background: linear-gradient(180deg, rgba(240, 208, 120, 0.32), rgba(201, 160, 58, 0.18));
  color: #ffd36a;
}
@media (max-width: 640px) {
  .cl-date-nav {
    max-width: 100%;
  }
}

/* Banner fase di aggiornamento (MAINTENANCE_MODE) */
#maint-banner{position:sticky;top:0;z-index:9999;background:#b45309;color:#fff;text-align:center;padding:.6rem 1rem;font-weight:600;line-height:1.35}
.maint-notice{background:rgba(180,83,9,.15);border:1px solid #b45309;border-radius:8px;padding:.75rem 1rem;font-weight:600}

/* Forum composer toolbar, polls, embeds, spoilers, lightbox */
.forum-md-toolbar {
  position: relative;
  margin: 0;
  background: linear-gradient(180deg, rgba(28, 31, 39, 0.96), rgba(18, 20, 26, 0.96));
  border: 1px solid rgba(240, 208, 120, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px 8px 0 0;
}
.forum-md-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.forum-md-tabs {
  display: flex;
  gap: 0;
  margin: 0;
}
.forum-md-tab {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 10px 14px 8px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.forum-md-tab:hover { color: #fff; }
.forum-md-tab.is-on {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.forum-md-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.forum-md-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 0;
  align-items: center;
  padding: 6px 8px;
}
.forum-md-group { display: inline-flex; align-items: center; gap: 2px; }
.forum-md-sep {
  width: 1px;
  height: 18px;
  margin: 0 6px;
  background: rgba(240, 208, 120, 0.22);
  flex: 0 0 1px;
}
.forum-md-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.82);
  border-radius: 6px;
  cursor: pointer;
  flex: 0 0 32px;
}
.forum-md-btn:hover,
.forum-md-btn[aria-expanded="true"],
.forum-md-btn.is-active {
  background: rgba(240, 208, 120, 0.1);
  border-color: rgba(240, 208, 120, 0.28);
  color: var(--gold);
}
.forum-md-btn:active { background: rgba(240, 208, 120, 0.18); }
.forum-md-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.forum-md-icon { width: 16px; height: 16px; display: block; pointer-events: none; }
.forum-md-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  background: #0b0c10;
  color: #fff;
  border: 1px solid rgba(240, 208, 120, 0.28);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms var(--ease), transform 120ms var(--ease);
  z-index: 5;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
.forum-md-btn[data-tip]:hover::after,
.forum-md-btn[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

form:has([data-forum-toolbar]) .field:has(textarea[name="content"]) { margin: 0; }
form:has([data-forum-toolbar]) .field:has(textarea[name="content"]) > span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
form:has([data-forum-toolbar]) .field:has(textarea[name="content"]) textarea[name="content"],
form:has([data-forum-toolbar]) [data-md-preview] {
  width: 100%;
  min-height: 10em;
  margin: 0;
  border: 1px solid rgba(240, 208, 120, 0.16);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #0f1116;
}
form:has([data-forum-toolbar]) [data-md-preview] { min-height: 10em; }
.forum-md-toolbar.is-preview .forum-md-btns { opacity: 0.45; pointer-events: none; }

.forum-md-pop {
  position: absolute;
  left: 8px;
  right: auto;
  top: calc(100% - 2px);
  z-index: 8;
  width: min(340px, calc(100% - 16px));
  padding: 10px;
  background: #161920;
  border: 1px solid rgba(240, 208, 120, 0.22);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.forum-md-pop[hidden] { display: none !important; }
.forum-md-color-pop, .forum-md-size-pop { width: auto; padding: 8px; }
.forum-md-color-pop {
  display: grid;
  grid-template-columns: repeat(5, 28px);
  gap: 8px;
}
.forum-md-swatch {
  width: 28px; height: 28px; padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.forum-md-swatch:hover, .forum-md-swatch:focus-visible {
  transform: scale(1.08);
  border-color: #fff;
  outline: none;
}
.forum-md-size-pop { display: grid; gap: 2px; min-width: 160px; }
.forum-md-sizeopt {
  background: transparent;
  border: 0;
  color: #fff;
  text-align: left;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
}
.forum-md-sizeopt:hover, .forum-md-sizeopt:focus-visible { background: rgba(240, 208, 120, 0.12); color: var(--gold); }
.forum-md-pop-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0 10px;
  background: #0f1116;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}
.forum-md-pop-search .forum-md-icon { color: var(--muted); flex: 0 0 16px; }
.forum-md-pop-search input {
  flex: 1;
  min-height: 36px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: #fff;
  width: 100%;
}
.forum-md-pop-search input:focus { outline: none; }
.forum-md-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.forum-md-cat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.forum-md-cat.is-on, .forum-md-cat:hover {
  color: var(--gold);
  border-color: rgba(240, 208, 120, 0.35);
  background: rgba(240, 208, 120, 0.1);
}
.forum-md-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-height: 220px;
  overflow: auto;
}
.forum-emoji-btn {
  background: none;
  border: 0;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 0;
  border-radius: 6px;
}
.forum-emoji-btn:hover, .forum-emoji-btn:focus-visible { background: rgba(240, 208, 120, 0.12); }
.forum-md-gif-pop { width: min(420px, calc(100% - 16px)); }
.forum-md-gif-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow: auto;
}
.forum-gif-pick {
  padding: 0;
  border: 1px solid transparent;
  background: #111;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
}
.forum-gif-pick:hover, .forum-gif-pick:focus-visible { border-color: var(--gold); }
.forum-gif-pick img { display: block; width: 100%; height: 80px; object-fit: cover; }
.forum-md-empty { margin: 8px 4px; font-size: 13px; }

.forum-md-preview {
  min-height: 10em;
  padding: 12px 14px;
  background: #0f1116;
}

/* Poll builder card */
.forum-poll-card {
  margin: 14px 0 4px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(240, 208, 120, 0.2);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(28, 31, 39, 0.85), rgba(15, 17, 22, 0.9));
  display: grid;
  gap: 12px;
}
.forum-poll-card[hidden] { display: none !important; }
.forum-poll-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.forum-poll-card-head h4 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
.forum-poll-card-head h4 .forum-md-icon { width: 16px; height: 16px; }
.forum-poll-dismiss, .forum-poll-optdel, .forum-poll-grip, .forum-poll-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.forum-poll-dismiss:hover, .forum-poll-optdel:hover { background: rgba(255, 82, 82, 0.16); color: #ff8a8a; }
.forum-poll-opts-edit { display: grid; gap: 8px; }
.forum-poll-optrow {
  display: grid;
  grid-template-columns: 28px 22px minmax(0, 1fr) 28px;
  gap: 6px;
  align-items: center;
}
.forum-poll-optrow.is-dragging { opacity: 0.55; }
.forum-poll-optrow.is-dragover { outline: 1px dashed rgba(240, 208, 120, 0.5); outline-offset: 2px; }
.forum-poll-grip { cursor: grab; color: var(--muted-2); }
.forum-poll-grip:active { cursor: grabbing; }
.forum-poll-idx {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}
.forum-poll-optrow input {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  background: #0f1116;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: var(--ink);
}
.forum-poll-optrow input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(240, 208, 120, 0.12);
}
.forum-poll-optdel:disabled { opacity: 0.3; cursor: not-allowed; }
.forum-poll-add { justify-self: start; gap: 6px; }
.forum-poll-add .forum-md-icon { width: 14px; height: 14px; }
.forum-poll-card .field { margin-bottom: 0; }
.forum-poll-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.forum-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.forum-switch input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.forum-switch-ui {
  position: relative;
  width: 40px;
  height: 22px;
  flex: 0 0 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.forum-switch-ui::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 160ms var(--ease);
}
.forum-switch input:checked + .forum-switch-ui {
  background: rgba(240, 208, 120, 0.35);
  border-color: var(--gold);
}
.forum-switch input:checked + .forum-switch-ui::after { transform: translateX(18px); background: var(--gold); }
.forum-switch input:focus-visible + .forum-switch-ui { outline: 2px solid var(--gold); outline-offset: 2px; }
.forum-poll-stepper-wrap, .forum-poll-close-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.forum-poll-stepper-wrap[hidden], .forum-poll-close-wrap[hidden] { display: none !important; }
.forum-poll-step-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.forum-poll-stepper {
  display: inline-flex;
  align-items: center;
  background: #0b0c10;
  border: 1px solid rgba(240, 208, 120, 0.28);
  border-radius: 8px;
  overflow: visible;
  position: relative;
}
.forum-poll-step { width: 30px; height: 32px; border-radius: 0; color: var(--ink); }
.forum-poll-step:hover { background: rgba(240, 208, 120, 0.12); color: var(--gold); }
.forum-poll-max-val {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 32px;
  padding: 0 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  -webkit-text-fill-color: #fff;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: #14161c;
}
.forum-poll-stepper input.forum-poll-max-input,
.forum-poll-stepper input[name="pollMax"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.forum-poll-close-wrap input[type="datetime-local"] {
  min-height: 36px;
  padding: 4px 10px;
  background: #0f1116;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color-scheme: dark;
}

/* Poll in topic */
.forum-poll {
  margin: 16px 0 22px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(240, 208, 120, 0.18);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(28, 31, 39, 0.9), rgba(15, 17, 22, 0.92));
}
.forum-poll-head h3 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 18px;
}
.forum-poll-meta, .forum-poll-status { margin: 0; font-size: 13px; color: var(--muted); }
.forum-poll-opts { display: grid; gap: 8px; margin: 14px 0; }
.forum-poll-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  cursor: pointer;
}
.forum-poll-opt:hover { border-color: rgba(240, 208, 120, 0.28); }
.forum-poll-opt.is-mine { border-color: rgba(240, 208, 120, 0.45); }
.forum-poll-opt input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 18px;
  border: 2px solid rgba(240, 208, 120, 0.45);
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}
.forum-poll-opt input[type="checkbox"] { border-radius: 4px; }
.forum-poll-opt input:checked {
  background: var(--gold);
  border-color: var(--gold);
}
.forum-poll-opt input:checked::after {
  content: "";
  width: 8px;
  height: 8px;
  background: #1a1408;
  border-radius: 50%;
}
.forum-poll-opt input[type="checkbox"]:checked::after {
  width: 8px;
  height: 5px;
  background: transparent;
  border: 2px solid #1a1408;
  border-top: 0;
  border-right: 0;
  border-radius: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
.forum-poll-opt input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.forum-poll-label { position: relative; z-index: 1; font-weight: 600; }
.forum-poll-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(240, 208, 120, 0.18), rgba(240, 208, 120, 0.38));
  z-index: 0;
  pointer-events: none;
  transition: width 650ms var(--ease);
}
.forum-poll-opt.is-ready .forum-poll-bar { width: var(--pct, 0%); }
.forum-poll-count {
  position: relative;
  z-index: 1;
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.forum-poll-count strong { color: var(--gold); font-weight: 700; }
.forum-poll-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.forum-spoiler {
  background: #111;
  color: transparent;
  border-radius: 3px;
  cursor: pointer;
  padding: 0 .15em;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15);
}
.forum-spoiler.is-open { background: rgba(255,255,255,.08); color: inherit; }
.forum-c-red { color: #ff6b6b; } .forum-c-orange { color: #ff9f43; }
.forum-c-gold { color: #f8d36a; } .forum-c-green { color: #6bd98a; }
.forum-c-teal { color: #5ad1c8; } .forum-c-blue { color: #6cb6ff; }
.forum-c-purple { color: #c89bff; } .forum-c-pink { color: #ff8cc7; }
.forum-c-gray { color: #b0b8c4; } .forum-c-white { color: #f5f5f5; }
.forum-sz-sm { font-size: .85em; }
.forum-sz-lg { font-size: 1.25em; }
.forum-sz-xl { font-size: 1.5em; font-weight: 700; font-family: var(--display); }
.forum-sz-md { font-size: 1em; }
.forum-mention { color: #7ec8ff; }
.post-body img, .ann-prose img, .forum-img-block img {
  max-width: min(100%, 720px); max-height: 420px; height: auto; border-radius: 6px; display: block;
}
.forum-img-link { display: inline-block; max-width: 100%; }
.forum-embed { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16/9; margin: 10px 0; background: #000; border-radius: 8px; overflow: hidden; }
.forum-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.forum-link-card { margin: 10px 0; max-width: 720px; }
.forum-link-card-inner {
  display: flex; gap: 12px; align-items: start;
  padding: 10px; border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: inherit;
}
.forum-link-card-inner img { width: 120px; height: 80px; object-fit: cover; border-radius: 4px; flex: 0 0 120px; }
.forum-link-card-inner span { display: grid; gap: 4px; min-width: 0; }
.forum-link-card-inner em { font-style: normal; opacity: .8; font-size: 13px; }
.forum-link-card-inner small { opacity: .55; font-size: 11px; }
body.forum-lightbox-on { overflow: hidden; }
.forum-lightbox {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(6, 7, 10, 0.92);
  display: flex; align-items: center; justify-content: center;
}
.forum-lightbox[hidden] { display: none !important; }
.forum-lightbox-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(15, 17, 22, 0.85);
  border: 1px solid rgba(240, 208, 120, 0.28);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
}
.forum-lightbox-close:hover { background: rgba(240, 208, 120, 0.16); color: var(--gold); }
.forum-lightbox-close .forum-md-icon { width: 18px; height: 18px; }
.forum-lightbox-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; touch-action: none; overflow: hidden; }
.forum-lightbox-stage img { max-width: 92vw; max-height: 88vh; transform-origin: center center; user-select: none; }
.forum-lightbox-hint {
  position: absolute; bottom: 16px; left: 0; right: 0;
  text-align: center; margin: 0;
  font-size: 12px; color: rgba(255,255,255,.55);
  pointer-events: none;
}
@media (max-width: 720px) {
  .forum-md-emoji-grid { grid-template-columns: repeat(7, 1fr); }
  .forum-poll-optrow { grid-template-columns: 24px 18px minmax(0, 1fr) 28px; }
  .forum-md-btn[data-tip]::after { display: none; }
}

/* Staff topic tools — compact header toolbar */
.forum-hero-card > div:first-child { min-width: 0; flex: 1 1 auto; }
.forum-hero-card .forum-staff-tools { flex: 0 0 auto; margin-left: auto; align-self: center; }
.ann-detail-hero .forum-staff-tools { flex: 0 0 auto; margin-left: auto; align-self: flex-end; }

.forum-staff-tools { position: relative; display: flex; align-items: center; }
.forum-staff-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.forum-staff-more {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
}
.forum-staff-more:hover,
.forum-staff-more[aria-expanded="true"] {
  background: rgba(240, 208, 120, 0.1);
  border-color: rgba(240, 208, 120, 0.35);
  color: var(--gold);
}
.forum-staff-more:focus-visible,
.forum-staff-btn:focus-visible,
.forum-staff-cat:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.forum-staff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  min-height: 34px;
  padding: 0 10px;
  margin: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.88);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.forum-staff-btn .forum-md-icon,
.forum-staff-btn .forum-staff-icon,
.forum-staff-more .forum-md-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: block;
  pointer-events: none;
}
.forum-staff-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.forum-staff-btn.is-on,
.forum-staff-btn[aria-pressed="true"] {
  color: var(--gold);
  border-color: rgba(240, 208, 120, 0.42);
  background: rgba(240, 208, 120, 0.14);
}
.forum-staff-btn.is-on:hover {
  background: rgba(240, 208, 120, 0.22);
  color: var(--gold);
}
.forum-staff-btn.is-danger {
  color: #ff8a8a;
  background: transparent;
  border-color: rgba(255, 82, 82, 0.42);
}
.forum-staff-btn.is-danger:hover {
  background: rgba(255, 82, 82, 0.14);
  color: #ffb0b0;
  border-color: rgba(255, 82, 82, 0.55);
}
.forum-staff-move { position: relative; }
.forum-staff-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 12;
  min-width: 220px;
  max-width: min(320px, 80vw);
  max-height: 280px;
  overflow: auto;
  padding: 6px;
  background: #161920;
  border: 1px solid rgba(240, 208, 120, 0.22);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.forum-staff-pop[hidden] { display: none !important; }
.forum-staff-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.forum-staff-cat:hover,
.forum-staff-cat:focus-visible { background: rgba(240, 208, 120, 0.12); color: var(--gold); }
.forum-staff-cat.is-current,
.forum-staff-cat:disabled {
  color: var(--gold);
  opacity: 1;
  cursor: default;
  background: rgba(240, 208, 120, 0.08);
}
.forum-staff-cat.is-current:hover { color: var(--gold); }
.forum-staff-cat-now {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}

@media (max-width: 720px) {
  .forum-staff-more { display: inline-flex; }
  .forum-staff-bar {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 11;
    flex-direction: column;
    align-items: stretch;
    min-width: 200px;
    padding: 6px;
    background: #161920;
    border: 1px solid rgba(240, 208, 120, 0.22);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    gap: 4px;
  }
  .forum-staff-tools.is-open .forum-staff-bar { display: flex; }
  .forum-staff-btn { width: 100%; justify-content: flex-start; }
  .forum-staff-pop {
    position: static;
    width: 100%;
    max-width: none;
    margin-top: 4px;
    box-shadow: none;
  }
}

.forum-moved { font-size: 12px; font-style: italic; margin: 6px 0 0; }

/* Poll results visible to all viewers; compact staff/edit actions */
.forum-poll-opt.has-results { cursor: pointer; }
.forum-poll-opt.is-mine {
  border-color: rgba(240, 208, 120, 0.58);
  background: rgba(240, 208, 120, 0.1);
  box-shadow: inset 0 0 0 1px rgba(240, 208, 120, 0.18);
}
.forum-poll-opt.is-mine .forum-poll-label { color: var(--gold); }
.forum-poll-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.forum-poll-actions .btn {
  height: 34px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
}
.forum-poll-actions .forum-staff-btn .forum-md-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.forum-poll-edit-hint {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.forum-poll-edit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  align-items: center;
}
.forum-poll-edited {
  font-style: italic;
  font-weight: 400;
  opacity: 0.8;
  margin-left: 0.35em;
}
.forum-poll-optrow.is-locked .forum-poll-optdel:disabled { opacity: 0.35; cursor: not-allowed; }
.forum-switch input:disabled + .forum-switch-ui { opacity: 0.45; }
.forum-switch:has(input:disabled) { cursor: not-allowed; opacity: 0.85; }

/* Lobby chat nel Forum (pannello comprimibile in cima all'indice) */
.forum-lobby { border: 1px solid var(--line, rgba(214, 183, 120, 0.22)); border-radius: 6px; background: rgba(8, 12, 20, 0.55); }
.forum-lobby > summary.forum-lobby-head { list-style: none; cursor: pointer; margin: 0; padding: 14px 18px; align-items: center; }
.forum-lobby > summary::-webkit-details-marker { display: none; }
.forum-lobby > summary h2 { display: inline-flex; align-items: center; gap: 10px; }
.forum-lobby > summary::after { content: "▾"; margin-left: auto; color: var(--muted-2, #9a8f78); transition: transform 0.2s ease; }
.forum-lobby:not([open]) > summary::after { transform: rotate(-90deg); }
.forum-lobby-body { padding: 0 12px 12px; }
.forum-lobby .chat-head h2 { display: none; }
.forum-lobby .chat-head { justify-content: flex-end; }
.forum-lobby .chat { min-height: 0; }
.forum-lobby .chat-head { padding: 8px 12px; }
.forum-lobby .chat-log { max-height: 340px; min-height: 120px; }
@media (max-width: 720px) {
  .forum-lobby > summary.forum-lobby-head { padding: 12px 14px; }
  .forum-lobby > summary .muted { flex-basis: 100%; font-size: 13px; }
  .forum-lobby .chat-log { max-height: 280px; }
}

/* Guida › Zone: "Azeroth sotto una nuova luce" — schede immagine vere (3 / 2 / 1 colonne, 16:9, cornice ornata) */
.zf-oh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.zf-oh-hit {
  aspect-ratio: 16 / 9;
  min-height: 0;
  border: 1px solid rgba(214, 178, 94, 0.55);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(20, 16, 10, 0.9), 0 0 0 4px rgba(214, 178, 94, 0.28), 0 10px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.zf-oh-hit::after {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: 2;
  border: 1px solid rgba(255, 220, 140, 0.18);
  border-radius: 6px;
  pointer-events: none;
}
.zf-oh-hit:hover, .zf-oh-hit:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 209, 0, 0.85);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(20, 16, 10, 0.9), 0 0 0 4px rgba(255, 209, 0, 0.45), 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 22px rgba(255, 190, 80, 0.18);
}
.zf-oh-hit:hover img { transform: scale(1.06); }
.zf-oh-label {
  padding: 34px 14px 12px;
  background: linear-gradient(180deg, transparent, rgba(6, 8, 12, 0.55) 40%, rgba(6, 8, 12, 0.92));
  font-size: 15px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
@media (max-width: 960px) { .zf-oh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .zf-oh-grid { grid-template-columns: minmax(0, 1fr); } .zf-oh-label { font-size: 14px; } }


/* —— Cookie consent banner + policy (portal gold/bronze, no layout shift) —— */
.wf-cc {
  position: fixed;
  z-index: 11000;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(3, 5, 10, 0.55) 70%);
}
.wf-cc-panel {
  pointer-events: auto;
  position: relative;
  width: min(760px, 100%);
  max-height: min(70vh, 640px);
  overflow: auto;
  padding: 22px 22px 20px;
  color: #efe6d2;
  border-radius: 10px;
  background: linear-gradient(180deg, #1a1410 0%, #0d0b0a 100%);
  border: 2px solid var(--gold-deep, #a67c1a);
  box-shadow:
    0 0 0 1px rgba(240, 208, 120, 0.35) inset,
    0 0 0 6px rgba(13, 11, 10, 0.92),
    0 0 0 8px rgba(166, 124, 26, 0.7),
    0 16px 48px rgba(0, 0, 0, 0.65);
}
.wf-cc-panel::before,
.wf-cc-panel::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 2px solid var(--gold, #f0d078);
  pointer-events: none;
}
.wf-cc-panel::before {
  top: 8px;
  left: 8px;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 8px;
}
.wf-cc-panel::after {
  bottom: 8px;
  right: 8px;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 8px;
}
.wf-cc-panel h2 {
  margin: 0 16px 10px 0;
  font-family: Cinzel, var(--display), serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 3.2vw, 1.7rem);
  letter-spacing: 0.04em;
  color: var(--gold, #f0d078);
  text-shadow: 0 0 10px rgba(240, 190, 80, 0.45), 0 2px 0 #3a2706;
}
.wf-cc-panel p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: #efe6d2;
}
.wf-cc-policy a,
.footer-legal-links a {
  color: var(--gold, #f0d078);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wf-cc-policy a:hover,
.footer-legal-links a:hover { color: #fff3cf; }
.wf-cc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.wf-cc-btn,
.wf-cc-btn.btn {
  flex: 1 1 160px;
  min-height: 44px;
  padding: 0 16px;
  font-family: Cinzel, var(--display), serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: #1a1206;
  background: linear-gradient(180deg, #f0d078, #c9a03a);
  border: 2px solid #8a6414;
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(255, 236, 180, 0.5) inset;
}
.wf-cc-btn:hover,
.wf-cc-btn.btn:hover {
  color: #1a1206;
  background: linear-gradient(180deg, #ffe08a, #d4ad44);
}
.wf-cc-btn:focus-visible,
.wf-cc-switch:focus-visible,
.wf-cc-policy a:focus-visible {
  outline: 2px solid #fff3cf;
  outline-offset: 2px;
}
.wf-cc-cats[hidden] { display: none !important; }
.wf-cc-cats {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(240, 208, 120, 0.28);
  display: grid;
  gap: 10px;
}
.wf-cc-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(240, 208, 120, 0.22);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.28);
}
.wf-cc-cat-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.wf-cc-cat-copy strong {
  font-family: Cinzel, var(--display), serif;
  font-size: 14px;
  color: #fff3cf;
}
.wf-cc-cat-copy span {
  font-size: 12px;
  color: rgba(239, 230, 210, 0.8);
  line-height: 1.4;
}
.wf-cc-switch {
  flex: none;
  width: 48px;
  height: 28px;
  padding: 0;
  border: 2px solid #8a6414;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  position: relative;
}
.wf-cc-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #efe6d2;
  transition: transform 160ms ease, background 160ms ease;
}
.wf-cc-switch.is-on {
  background: linear-gradient(180deg, #f0d078, #c9a03a);
}
.wf-cc-switch.is-on::after {
  transform: translateX(20px);
  background: #1a1206;
}
.wf-cc-switch.is-locked {
  opacity: 0.85;
  cursor: not-allowed;
}
.wf-cc-save { flex: 1 1 100%; }
.wf-embed-ph {
  display: grid;
  gap: 12px;
  place-items: center;
  text-align: center;
  min-height: 200px;
  padding: 24px 18px;
  color: #efe6d2;
  background: linear-gradient(180deg, #1a1410, #0d0b0a);
  border: 1px solid rgba(166, 124, 26, 0.65);
  border-radius: 4px;
}
.wf-embed-ph p { margin: 0; max-width: 36em; font-size: 14px; line-height: 1.5; }
.forum-embed iframe,
.wf-embed-ok iframe,
.ff-yt iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}
.legal-page { padding: 32px var(--page) 64px; }
.legal-card {
  width: min(880px, 100%);
  margin: 0 auto;
  padding: 28px 24px 36px;
  background: linear-gradient(180deg, rgba(26, 20, 16, 0.96), rgba(13, 11, 10, 0.96));
  border: 1px solid rgba(166, 124, 26, 0.55);
  border-radius: 6px;
}
.legal-card h1 {
  margin: 0 0 8px;
  font-family: Cinzel, var(--display), serif;
  color: var(--gold, #f0d078);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}
.legal-card h2 {
  margin: 28px 0 10px;
  font-family: Cinzel, var(--display), serif;
  color: #fff3cf;
  font-size: 1.2rem;
}
.legal-card p { margin: 0 0 12px; line-height: 1.6; }
.legal-table-wrap { overflow-x: auto; margin: 12px 0 8px; }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.legal-table th, .legal-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(240, 208, 120, 0.2);
}
.legal-table thead th {
  color: var(--gold, #f0d078);
  font-family: Cinzel, var(--display), serif;
  font-weight: 700;
}
.legal-table tbody th { color: #fff3cf; font-weight: 700; white-space: nowrap; }
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 10px;
  font-size: 13px;
}
@media (max-width: 600px) {
  .wf-cc { padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .wf-cc-panel { padding: 18px 16px 16px; max-height: 68vh; }
  .legal-table tbody th { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .wf-cc-switch::after { transition: none; }
}