/* World detail panel headings
 * Keep the two shared content headings readable and visibly tied to each
 * world's palette in both colour modes. Loaded after the compatibility layer.
 */
body.tc-page[data-world]:not([data-world=""]) .tc-world-page .tc-wiki-panel > h2 {
  margin: -1px -1px 14px !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-bottom: 2px solid var(--wx-accent) !important;
  border-radius: 3px 3px 0 0 !important;
  background-color: var(--wx-hero) !important;
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--wx-accent) 46%, var(--wx-hero)),
    color-mix(in srgb, var(--wx-accent) 28%, var(--wx-hero))
  ) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--wx-hero) 70%, transparent) !important;
  box-shadow: none !important;
}

html[data-color-theme="dark"] body.tc-page[data-world]:not([data-world=""]) .tc-world-page .tc-wiki-panel > h2 {
  border-bottom-color: color-mix(in srgb, var(--wx-accent) 78%, var(--wx-border)) !important;
  background-color: var(--wx-hero) !important;
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--wx-accent) 32%, var(--wx-hero)),
    color-mix(in srgb, var(--wx-accent) 18%, var(--wx-hero))
  ) !important;
  color: var(--wx-title) !important;
  -webkit-text-fill-color: var(--wx-title) !important;
}

@media (max-width: 640px) {
  body.tc-page[data-world]:not([data-world=""]) .tc-world-page .tc-wiki-panel > h2 {
    padding: 11px 12px !important;
  }
}