/* World Boss page */
.world-boss { padding-bottom: 24px; }
.wb-hero { position: relative; overflow: hidden; min-height: 330px; margin-bottom: 14px; padding: 22px 24px 18px; border: 1px solid #6a2a2e; border-radius: 14px; background: #0d0909; box-shadow: 0 10px 30px #000b, 0 0 0 1px #a8202a22; }
.wb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.55); }
.wb-shade { position: absolute; inset: 0; background: radial-gradient(70% 90% at 75% 60%, #5c0f1466, transparent 70%), linear-gradient(90deg, #0d0909f0 0%, #0d0909aa 45%, transparent 75%), linear-gradient(0deg, #0d0909 0%, transparent 45%); }
.wb-boss { position: absolute; right: 2%; bottom: -6%; height: 118%; width: auto; filter: drop-shadow(0 0 30px #a8202a88) drop-shadow(0 10px 18px #000); animation: wb-breathe 5s ease-in-out infinite; pointer-events: none; }
@keyframes wb-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.012); } }
.wb-hero-text { position: relative; max-width: 520px; }
.wb-hero-text h2 { margin: 6px 0 0; font-family: var(--title); font-size: 38px; letter-spacing: 2px; color: #efe4d3; text-shadow: 0 0 22px #a8202a88, 0 3px 6px #000; }
.wb-sub { margin: 2px 0 10px; color: #d9686d; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; }
.wb-lore { margin: 0; color: #cfc2b0; font-size: 13px; line-height: 1.55; }
.wb-hp { position: relative; max-width: 640px; margin-top: 26px; }
.wb-hp-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.wb-hp-top b { color: #f3e9da; font-family: var(--title); font-size: 26px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 6px #000; }
.wb-hp-top span { color: #b9ab98; font-size: 12px; }
.wb-hp-bar { position: relative; height: 16px; overflow: hidden; border: 1px solid #8e2a2f; border-radius: 9px; background: #1a0d0e; box-shadow: inset 0 2px 6px #000; }
.wb-hp-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #5c0f14, #b3262e 60%, #e05a5a); box-shadow: 0 0 14px #d23a4088; transition: width .6s ease; }
.wb-tick { position: absolute; top: 0; bottom: 0; width: 2px; background: #ecdcc6aa; transform: translateX(-1px); }
.wb-hp-foot { display: flex; justify-content: space-between; margin-top: 6px; color: #a8998c; font-size: 11.5px; }

.wb-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
.wb-panel { margin-bottom: 14px; padding: 14px 16px 16px; border: 1px solid #433433; border-radius: 12px; background: linear-gradient(170deg, #1d1818, #110d0d); }
.wb-panel h3 { margin: 0 0 4px; font-family: var(--title); font-size: 15px; letter-spacing: 1.6px; text-transform: uppercase; color: #d9c9b2; }
.wb-locked { text-align: center; }
.wb-strike-head { display: flex; justify-content: space-between; gap: 14px; }
.wb-strike-head p { max-width: 460px; }
.wb-pips { display: flex; gap: 6px; }
.wb-pips i { width: 26px; height: 26px; border: 1px solid #5e4442; border-radius: 50%; background: #140f0f; transform: rotate(45deg); border-radius: 4px; }
.wb-pips i.on { border-color: #e05a5a; background: radial-gradient(circle, #e05a5a, #7a161c); box-shadow: 0 0 10px #d23a4088; }
.wb-strike-row { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.world-boss .wb-strike-btn { min-height: 52px; padding: 0 28px; font-family: var(--title); font-size: 17px; letter-spacing: 1px; }
.wb-mine { display: grid; }
.wb-mine span { color: #8e7f76; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; }
.wb-mine b { color: #efe4d3; font-size: 22px; font-variant-numeric: tabular-nums; }
.wb-mine small { color: #a8998c; }
.wb-result { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; padding: 10px 14px; border: 1px solid #8e2a2f; border-radius: 10px; background: radial-gradient(120% 140% at 0% 50%, #4a1418, #1a0e0e); animation: wb-pop .5s ease-out; }
.wb-result b { color: #ffe9d6; font-family: var(--title); font-size: 30px; text-shadow: 0 0 16px #e05a5a; }
.wb-result span { color: #ecdcc6; font-size: 13px; }
.wb-result.muted { opacity: .7; animation: none; }
@keyframes wb-pop { 0% { transform: scale(.9); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(1); } }
.wb-chests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.wb-chest { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #362b2a; border-radius: 10px; background: #151010; opacity: .7; }
.wb-chest.is-open { opacity: 1; border-color: #8e2a2f; background: linear-gradient(160deg, #2a1416, #120d0d); }
.wb-chest.is-claimed { opacity: .65; border-color: #4f6a3c; }
.wb-chest-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #1d1414; color: #e05a5a; font-size: 16px; }
.wb-chest b { display: block; color: #efe4d3; font-size: 12.5px; }
.wb-chest small { color: #a8998c; font-size: 11px; }
.wb-claimed { color: #b6e08f; font-size: 11px; font-weight: 700; }
.wb-board { display: grid; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.wb-board li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid #2e2323; border-radius: 8px; background: #151010; font-variant-numeric: tabular-nums; }
.wb-board li:nth-child(-n+3) { border-color: #6a2a2e; }
.wb-board li.is-self { border-color: #c0393f; background: #2a1416; }
.wb-board b { overflow: hidden; color: #efe4d3; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.wb-board span { color: #cfc2b0; font-size: 12.5px; }
.wb-rank { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #241a1a; color: #e05a5a !important; font-family: var(--title); font-size: 12px !important; }
.wb-empty { display: block !important; color: #8e7f76; text-align: center; }
.wb-witness { margin: 10px 0 0; color: #a8998c; font-size: 12px; }
.wb-witness b { color: #d9686d; }
@media (max-width: 1100px) { .wb-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .wb-hero { min-height: 380px; padding: 16px; }
  .wb-boss { right: -18%; height: 80%; opacity: .55; }
  .wb-hero-text h2 { font-size: 28px; }
  .wb-chests { grid-template-columns: 1fr; }
  .wb-strike-head { flex-direction: column; }
  .wb-strike-row { flex-direction: column; align-items: stretch; }
}
.wb-pips { padding: 4px 6px 0 0; }
/* Painted banner of the Nameless (replaces the region backdrop + founder portrait). */
.wb-bg.wb-banner { filter: saturate(.95) brightness(.85); object-position: 62% 40%; animation: wb-breathe-bg 9s ease-in-out infinite; }
.wb-hero .wb-shade { background: linear-gradient(90deg, #0d0909f2 0%, #0d0909b0 34%, transparent 62%), linear-gradient(0deg, #0d0909 0%, transparent 42%); }
@keyframes wb-breathe-bg { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@media (max-width: 760px) { .wb-bg.wb-banner { object-position: 72% 30%; } .wb-hero .wb-shade { background: linear-gradient(0deg, #0d0909f5 0%, #0d0909aa 50%, #0d090933 100%); } }
@media (prefers-reduced-motion: reduce) { .wb-bg.wb-banner { animation: none; } }