img.zs-asset-glow {
  filter: drop-shadow(0 0 3px rgba(220, 171, 82, .2925))
          drop-shadow(0 0 7px rgba(192, 131, 48, .1625));
}

.zs-medal-glow {
  filter: drop-shadow(0 0 2px rgba(220, 171, 82, .247));
}

.zs-discord-centre .zs-dc-heading .zs-dc-brand {
  display: block;
  flex: 0 0 20px;
  fill: #b59a68;
}

.zs-dc-total {
  text-shadow: 0 0 3px rgba(220, 171, 82, .36),
               0 0 7px rgba(220, 171, 82, .18);
}

.zs-guild-requirements,
.zs-tasks-intro {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #333;
  background: #221e20;
  color: #b7afb3;
  font: inherit;
  line-height: 1.6;
}

.zs-guild-requirements strong,
.zs-tasks-intro strong {
  color: #ded6da;
}

.zs-tasks-intro p { margin: 0 0 8px; }
.zs-tasks-intro p:last-child { margin-bottom: 0; }

.zs-task-monsters img.zs-asset-glow {
  filter: drop-shadow(0 0 3px rgba(220, 171, 82, .234))
          drop-shadow(0 0 7px rgba(192, 131, 48, .13));
}

.zs-top-widget .top-player-outfit-image.zs-asset-glow {
  filter: drop-shadow(0 0 3px rgba(220, 171, 82, .1989))
          drop-shadow(0 0 7px rgba(192, 131, 48, .1105));
}

/* Only GIFs whose source canvas is 32 px or smaller receive the Top Players 64 px size. */
.zs-motd__sprite--small {
  flex-basis: 64px;
  width: 64px;
  height: 64px;
}

/* City Maps and Respawns use the same compact tab treatment as the forum controls. */
.topic--body .zs-map-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 15px;
  border: 0;
}

.topic--body .zs-map-tabs > li { float: none; margin: 0; }

.topic--body .zs-war-stats div.zs-war-actions { gap: 6px; }

.topic--body .zs-war-stats div.zs-war-actions > a,
.topic--body .zs-guild-directory div.zs-guild-war-link > a,
.topic--body .zs-guild-directory > .topic-list--header > a.btn[href*="action=createguild"],
.topic--body .nav-tabs.zs-map-tabs > li > a {
  display: inline-block;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid #51464b;
  border-radius: 2px;
  background: #221e20;
  color: #d5cbd0;
  font: inherit;
  text-decoration: none;
}

.topic--body .zs-war-stats div.zs-war-actions > a:hover,
.topic--body .zs-war-stats div.zs-war-actions > a:focus,
.topic--body .zs-guild-directory div.zs-guild-war-link > a:hover,
.topic--body .zs-guild-directory div.zs-guild-war-link > a:focus,
.topic--body .zs-guild-directory > .topic-list--header > a.btn[href*="action=createguild"]:hover,
.topic--body .zs-guild-directory > .topic-list--header > a.btn[href*="action=createguild"]:focus,
.topic--body .nav-tabs.zs-map-tabs > li > a:hover,
.topic--body .nav-tabs.zs-map-tabs > li > a:focus {
  color: #eee7ea;
  border-color: #77636e;
  background: #302b2e;
}

.topic--body .nav-tabs.zs-map-tabs > li.active > a,
.topic--body .nav-tabs.zs-map-tabs > li.active > a:hover,
.topic--body .nav-tabs.zs-map-tabs > li.active > a:focus {
  color: #eee7ea;
  border-color: #77636e;
  background: #302b2e;
}

.topic--body .zs-war-stats div.zs-war-actions > a:focus-visible,
.topic--body .nav-tabs.zs-map-tabs > li > a:focus-visible {
  outline: 2px solid #ad95a5;
  outline-offset: 2px;
}

/* City Info already spaces the map below its tabs via .tab-content. */
.topic--body .nav-tabs.zs-map-tabs:has(> li > a[href^="#city-"]) {
  margin-bottom: 0;
}

.topic--body .nav-tabs.zs-map-tabs:has(> li > a[href^="#city-"])::before,
.topic--body .nav-tabs.zs-map-tabs:has(> li > a[href^="#city-"])::after {
  display: none;
}

/* Screenshots inside the War, Record and Cast guides. */
.zs-system-panel .zs-system-guide img[src^="https://i.postimg.cc/"] {
  outline: 1px solid #51464b;
  outline-offset: -1px;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(17, 14, 17, .46);
}

.zs-system-panel .zs-system-guide img[alt="Guild Badges - ZaganSquare"] {
  width: 460px;
  mask-image: linear-gradient(to right, #000d, #000 3%, #000 97%, #000d),
              linear-gradient(to bottom, #000d, #000 4%, #000 96%, #000d);
  mask-composite: intersect;
}

/* Cast screenshots carry inline widths. Keep the existing responsive max-width. */
.zs-system-panel .zs-system-guide img[alt="CAST button"] {
  width: 220px !important;
}

.zs-system-panel .zs-system-guide img[alt="Start Cast broadcast"],
.zs-system-panel .zs-system-guide img[alt="Public Cast broadcast"],
.zs-system-panel .zs-system-guide img[alt="Stop Cast broadcast"],
.zs-system-panel .zs-system-guide img[alt="Select a Cast broadcast"] {
  width: 260px !important;
}

.topnav .container-nav-centre > ul > li {
  position: relative;
}

.topnav .container-nav-centre > ul > li > img {
  transition: filter .22s ease;
}

.topnav .container-nav-centre > ul > li:hover > img {
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .85))
          drop-shadow(0 0 15px rgba(0, 0, 0, .7))
          drop-shadow(0 0 7px rgba(219, 160, 65, .48))
          brightness(1.07);
}

@supports (mask-image: url("")) {
  .topnav .container-nav-centre > ul > li::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    mask: url("../images/logo2.png") center / contain no-repeat;
    background: linear-gradient(135deg, transparent 44%, rgba(255, 213, 127, .48) 50%, transparent 56%);
    background-size: 260% 260%;
  }

  .topnav .container-nav-centre > ul > li:hover::after {
    animation: zs-crest-reflection 1.4s ease-out;
  }
}

@keyframes zs-crest-reflection {
  0% { background-position: 100% 100%; opacity: 0; }
  20%, 70% { opacity: 1; }
  100% { background-position: 0 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .topnav .container-nav-centre > ul > li > img { transition: none; }
  .topnav .container-nav-centre > ul > li:hover::after { animation: none; }
}