/* World feature: death screen extras, loot window, boss / elite health bar. */

/* ------------------------------------------------------------------ death screen */

.death-box.wd-box {
  max-width: min(520px, calc(100vw - 32px));
}

.wd-zone {
  display: inline-block;
  margin-top: 12px;
  padding: 2px 12px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* A solid pill in the zone colour (like the minimap's zone-type pill): no halo on paper. */
  color: #fff8e8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45) !important;
  border: 1px solid #1a0f06;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--wd-zone, var(--gold)) 78%, #1a0f06), color-mix(in srgb, var(--wd-zone, var(--gold)) 58%, #1a0f06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.wd-rule {
  margin: 10px auto 0;
  max-width: 440px;
  line-height: 1.45;
}

.wd-rule.wd-full {
  font-weight: 600;
  color: #9a1c12;
}

.wd-rule.wd-safe {
  color: #3a6a1c;
}

.wd-destroyed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.wd-destroyed-label {
  margin-right: 4px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--error);
}

.wd-item {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid #7a2a20;
  border-radius: 3px;
  filter: grayscale(0.7) brightness(0.8);
}

.wd-item canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.wd-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, transparent 46%, rgba(224, 69, 58, 0.9) 47%, rgba(224, 69, 58, 0.9) 53%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgba(224, 69, 58, 0.9) 47%, rgba(224, 69, 58, 0.9) 53%, transparent 54%);
  pointer-events: none;
}

.wd-auto {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-faint);
}

.death-box.wd-box-full {
  border-color: #4a1a12;
  box-shadow: 0 0 48px rgba(160, 0, 0, 0.6), var(--shadow);
}

/* ------------------------------------------------------------------ loot window */

.panel.world-loot .panel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wl-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wl-bag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  background: radial-gradient(circle at 50% 40%, #3a2c18, #140f0a);
  border: 1px solid #120a04;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--brass), 0 0 0 3px #3a2508;
}

.wl-titles {
  min-width: 0;
}

.wl-name {
  overflow: hidden;
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: bold;
  color: #4a2a10;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wl-sub {
  font-size: 11.5px;
  color: var(--text-dim);
}

/* Sub-line under the window title (in the wooden header). */
.world-loot .panel-title-text {
  margin-top: -14px;
}

.wl-sub.wl-sub-head {
  position: absolute;
  left: 64px;
  right: 40px;
  bottom: 7px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 600;
  color: #d9c7a0;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px #000;
}

.wl-excl {
  padding: 4px 8px;
  font-size: 11.5px;
  color: #6e3a0a;
  background: rgba(200, 140, 40, 0.25);
  border: 1px solid #9a6a22;
  border-radius: 3px;
}

.wl-excl.mine {
  color: #2f5a14;
  background: rgba(110, 160, 60, 0.25);
  border-color: #4f7a34;
}

.wl-silver {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 8px;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

.wl-silver-val {
  font-weight: bold;
  color: var(--ink);
}

.wl-silver-unit {
  flex: 1;
  color: var(--text-dim);
}

.wl-silver.pending,
.wl-grid.pending,
.wl-slot.pending {
  opacity: 0.55;
  pointer-events: none;
}

.wl-grid {
  --slot: 60px;
  display: grid;
  grid-template-columns: repeat(5, var(--slot));
  gap: 6px;
  justify-content: center;
  max-height: calc(var(--slot) * 5 + 30px);
  padding: 6px;
  overflow-y: auto;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

.wl-slot {
  animation: wl-pop 0.18s ease-out;
}

.wl-slot.broken {
  filter: grayscale(0.8);
}

.wl-empty {
  padding: 18px 0;
  text-align: center;
  color: var(--text-faint);
}

.wl-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wl-hint {
  flex: 1;
  font-size: 11px;
  color: var(--text-faint);
}

.wl-all {
  margin-left: auto;
}

@keyframes wl-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------------ boss / elite health bar */

#world-boss {
  --wb-tier: var(--gold);
  position: fixed;
  /* Below the round menu buttons (top-right) so the two never meet at 1280 px. */
  top: 60px;
  left: 50%;
  z-index: 21;
  /* Centered between the portrait frame (left, ~310px; the target frame hides while this bar
     shows) and the tracker column (right); narrower viewports push the status column down. */
  width: min(560px, calc(100vw - 720px));
  min-width: 300px;
  padding: 7px 12px 9px;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -8px);
  background: linear-gradient(180deg, rgba(40, 22, 16, 0.95), rgba(16, 10, 8, 0.95));
  border: 1px solid #8a5a2a;
  border-top: 2px solid #d08a3a;
  border-radius: 4px;
  box-shadow: 0 0 22px rgba(255, 140, 40, 0.18), 0 8px 22px rgba(0, 0, 0, 0.65);
  transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
}

#world-boss.show {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity 0.2s, transform 0.2s;
}

#world-boss.boss {
  border-color: #8a2a2a;
  border-top-color: #e0453a;
  box-shadow: 0 0 28px rgba(224, 69, 58, 0.3), 0 8px 22px rgba(0, 0, 0, 0.7);
}

@media (max-width: 1400px) {
  #ui:has(#world-boss.show) #sc-status {
    transform: translateY(86px);
  }
}

#ui:has(#world-boss.show) #toasts {
  top: 150px;
}

@media (max-width: 740px) {
  #ui:has(#world-boss.show) #sc-party {
    transform: translateY(86px);
  }
}

/* The wide frame replaces the regular target frame while it is shown. */
#ui:has(#world-boss.show) #hud-target {
  visibility: hidden;
}

.wb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.wb-rank {
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd27a;
  background: rgba(120, 70, 10, 0.45);
  border: 1px solid #b0802a;
  border-radius: 3px;
}

#world-boss.boss .wb-rank {
  color: #ffd0c8;
  background: rgba(130, 20, 16, 0.55);
  border-color: #e0453a;
}

.wb-name {
  flex: 1;
  overflow: hidden;
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: #fff0dc;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 0 #000, 0 0 12px rgba(255, 140, 60, 0.35);
}

.wb-tier {
  font-size: 11.5px;
  font-weight: bold;
  color: var(--wb-tier);
  text-shadow: 0 1px 0 #000;
}

.wb-close {
  width: 20px;
  height: 20px;
  padding: 0;
  line-height: 16px;
  color: var(--text-dim);
  cursor: pointer;
  background: #1a140f;
  border: 1px solid var(--border-dim);
  border-radius: 3px;
}

.wb-close:hover {
  color: #fff;
  border-color: var(--error);
}

.wb-bar {
  position: relative;
  height: 20px;
  overflow: hidden;
  background: #0b0806;
  border: 1px solid #000;
  border-radius: 2px;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 190, 120, 0.12);
}

.wb-chip,
.wb-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.wb-chip {
  background: linear-gradient(180deg, #fff1c8, #e0a64a);
  opacity: 0.8;
  transition: width 0.7s ease-in 0.45s;
}

.wb-fill {
  background: linear-gradient(180deg, #f0705f 0%, #c0392b 45%, #7a1b12 100%);
  transition: width 0.12s linear;
}

#world-boss.low .wb-fill {
  animation: wb-pulse 0.9s ease-in-out infinite;
}

.wb-ticks {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), rgba(0, 0, 0, 0.45) calc(10% - 1px), rgba(0, 0, 0, 0.45) 10%);
  pointer-events: none;
}

.wb-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.03em;
  color: #fff;
  white-space: pre;
  text-shadow: 0 0 3px #000, 0 1px 1px #000;
}

#world-boss.dead .wb-name {
  text-decoration: line-through;
  opacity: 0.7;
}

#world-boss.dead .wb-text {
  color: var(--gold-bright);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.wb-cast {
  position: relative;
  height: 14px;
  margin-top: 5px;
  overflow: hidden;
  background: #0b0806;
  border: 1px solid #000;
  border-radius: 2px;
}

.wb-cast-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: linear-gradient(90deg, #6a4ccf, #c4a8ff);
}

.wb-cast.danger {
  border-color: #e0453a;
  box-shadow: 0 0 10px rgba(224, 69, 58, 0.55);
  animation: wb-danger 0.5s ease-in-out infinite alternate;
}

.wb-cast.danger .wb-cast-fill {
  background: linear-gradient(90deg, #a01e14, #ff6a4a);
}

.wb-cast-label,
.wb-cast-time {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 3px #000;
}

.wb-cast-label {
  left: 8px;
  letter-spacing: 0.05em;
}

.wb-cast-time {
  right: 8px;
  color: #e8dcc4;
}

.wb-fx {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-height: 0;
  margin-top: 5px;
}

.wb-fx:empty {
  display: none;
}

@keyframes wb-pulse {
  50% {
    filter: brightness(1.35);
  }
}

@keyframes wb-danger {
  to {
    box-shadow: 0 0 16px rgba(255, 90, 60, 0.85);
  }
}

@media (max-width: 760px) {
  #world-boss {
    width: calc(100vw - 24px);
    min-width: 0;
  }
}

/* ------------------------------------------------------------------ royal cities: Traveler window */

.tv-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tv-city {
  font-size: 14px;
}

.tv-label,
.tv-home {
  color: var(--text-dim);
}

.tv-home {
  font-size: 12px;
}

.tv-weight {
  padding: 6px 8px;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
}

.tv-weight-text {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
}

.tv-weight-bar {
  height: 6px;
  margin-top: 4px;
  overflow: hidden;
  background: linear-gradient(180deg, #1d2127, #3c434c);
  border-radius: 3px;
}

.tv-weight-fill {
  height: 100%;
  background: var(--good);
  transition: width 0.25s;
}

.tv-weight.bad .tv-weight-fill {
  background: var(--error);
}

.tv-value {
  margin-top: -2px;
  font-size: 12px;
  color: var(--text-dim);
}

.tv-value.bad {
  color: var(--error);
}

.tv-weight.bad b,
.tv-rule.bad {
  color: var(--error);
}

.tv-rule {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-dim);
}

.tv-dests {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tv-dest {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--well);
  border: 1px solid var(--border-dim);
  border-radius: 4px;
}

.tv-dest-info {
  flex: 1 1 auto;
  min-width: 0;
}

.tv-dest-name {
  font-weight: bold;
  color: var(--gold);
}

.tv-dest-bonus {
  font-size: 11.5px;
  color: #1f6a62;
}

.tv-go {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.tv-empty {
  color: var(--text-dim);
  text-align: center;
}

/* Departure fade: the screen goes dark over the server's travel delay, then lifts in the new city. */
.tv-fade {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--tv-fade, 2s) ease-in;
}

.tv-fade.in {
  opacity: 0.94;
  pointer-events: auto;
}

.tv-fade.out {
  opacity: 0;
  transition-timing-function: ease-out;
}

.tv-fade-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.tv-fade-text {
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-shadow: 0 2px 6px #000;
}