/* Static scenery behind the image: opaque artwork naturally covers it.
   No overlays, filters, extra images, animation or interference with combat auras. */
.npc-backdrop.npc-backdrop {
    position: relative;
    overflow: clip;
    background-color: var(--npc-floor, #194e59);
    background-image: var(--npc-scene);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.npc-backdrop-standard {
    --npc-floor: #286572;
    --npc-scene:
        radial-gradient(ellipse at 50% 43%, transparent 0 38%, #e0fffa38 38.3% 38.7%, transparent 39% 53%, #dbfffa22 53.3% 53.6%, transparent 54%),
        linear-gradient(128deg, transparent 0 23%, #e4fff529 23.1% 23.4%, transparent 23.6% 76%, #e4fff51c 76.1% 76.4%, transparent 76.6%),
        radial-gradient(ellipse at 50% 31%, #e1fbec 0, #a4d9d5 32%, #66a8b0 66%, #286572 100%);
}
.npc-backdrop-elite {
    --npc-floor: #143655;
    --npc-scene:
        radial-gradient(ellipse at 50% 42%, transparent 0 39%, #ceeffb55 39.3% 39.7%, transparent 40% 54%, #9bdffe26 54.3% 54.7%, transparent 55%),
        conic-gradient(from 12deg at 50% 44%, transparent 0 36deg, #d1f7ff24 37deg 40deg, transparent 41deg 141deg, #86d8ff20 142deg 146deg, transparent 147deg 219deg, #d1f7ff24 220deg 224deg, transparent 225deg 315deg, #86d8ff20 316deg 320deg, transparent 321deg),
        radial-gradient(ellipse at 50% 29%, #aad9ee 0, #4d96bc 31%, #285879 66%, #142b48 100%);
}
.npc-backdrop-boss {
    --npc-floor: #261b40;
    --npc-scene:
        radial-gradient(ellipse at 50% 41%, transparent 0 38%, #f4d89799 38.3% 38.8%, transparent 39.2% 42%, #eac77938 42.3% 42.6%, transparent 43% 58%, #c4a5e12b 58.3% 58.7%, transparent 59%),
        linear-gradient(125deg, #d9b36b35, transparent 24% 76%, #d9b36b26),
        radial-gradient(ellipse at 50% 32%, #b39ebf 0, #7e619b 28%, #48365f 63%, #211a36 100%);
}
.npc-backdrop-legendary {
    --npc-floor: #321c2b;
    --npc-scene:
        linear-gradient(128deg, transparent 0 16%, #ffd59891 16.2% 16.6%, #edac6340 16.9% 19%, transparent 19.4% 79%, #edac6340 79.4% 82%, #ffd59891 82.2% 82.6%, transparent 83%),
        linear-gradient(52deg, transparent 0 24%, #fac99432 24.2% 24.5%, transparent 25% 73%, #fac99432 73.2% 73.5%, transparent 74%),
        radial-gradient(ellipse at 50% 34%, #e9b3a0 0, #b06a72 26%, #7a364b 54%, #321c2b 100%);
}
.npc-backdrop-mythic {
    --npc-floor: #151d32;
    --npc-scene:
        radial-gradient(circle at 14% 17%, #fff3d6 0 1px, #ead29b38 2px, transparent 5px),
        radial-gradient(circle at 82% 27%, #fff8e6 0 1.5px, #ead29b42 2px, transparent 6px),
        radial-gradient(circle at 24% 65%, #fce7bccc 0 1px, transparent 3px),
        radial-gradient(circle at 73% 9%, #e7efffaa 0 1px, transparent 3px),
        radial-gradient(circle at 90% 73%, #e7efffaa 0 1px, transparent 3px),
        radial-gradient(ellipse at 50% 42%, transparent 0 39%, #fff2cbb3 39.2% 39.7%, #f3dba926 40% 42%, transparent 43% 56%, #e5e4ff38 56.2% 56.6%, transparent 57%),
        radial-gradient(ellipse at 50% 26%, #d1c9b8 0, #858fa6 24%, #495779 48%, #29324f 71%, #151d32 100%);
}
.npc-backdrop-picker { min-width: 0; margin: 6px 0; padding: 16px; border: 1px solid #c5dedf; border-radius: 16px; background: #f6fbfa; }
.npc-backdrop-picker legend { padding: 0 7px; font-weight: 650; color: #245664; }
.npc-backdrop-picker > p { margin: 0 0 14px; font-size: 12px; color: #5b7c87; line-height: 1.6; }
.npc-backdrop-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.npc-backdrop-option { min-width: 0; display: flex; flex-direction: column; text-align: left; gap: 5px; border: 1px solid #cbdfdf; border-radius: 12px; padding: 6px 6px 10px; background: #fff; color: #265361; cursor: pointer; }
.npc-backdrop-option.is-selected { border-color: #159ba8; box-shadow: 0 0 0 2px #159ba82b; }
.npc-backdrop-option:hover { border-color: #529aa5; }
.npc-backdrop-option:focus-visible { outline: 2px solid #138f9f; outline-offset: 3px; }
.npc-backdrop-swatch { display: grid; place-items: center; width: 100%; height: 76px; border-radius: 7px; overflow: hidden; }
.npc-backdrop-swatch > span { color: #fff9e6cf; font-size: 23px; text-shadow: 0 2px 8px #152d4866; }
.npc-backdrop-option strong { padding: 3px 5px 0; font-size: 12px; }
.npc-backdrop-option small { padding: 0 5px; font-size: 10px; color: #68818a; line-height: 1.5; }
.npc-backdrop-note { display: block; margin-top: 12px; color: #66828a; font-size: 11px; }
@media (max-width: 700px) {
    .npc-backdrop-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .npc-backdrop-option:last-child { grid-column: 1 / -1; }
    .npc-backdrop-option:last-child .npc-backdrop-swatch { height: 64px; }
}
.npc-backdrop .npc-rank-badge{position:absolute;left:14px;top:14px;z-index:4;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid #a3d9f3;border-radius:8px;background:#143e59ed;color:#e2f6ff;font-size:11px;font-weight:700;letter-spacing:.6px;line-height:1.3;box-shadow:0 2px 8px #102e4033;pointer-events:none}.npc-backdrop-boss .npc-rank-badge{background:#422654f2;color:#ffe6a5;border-color:#d8b974}.npc-backdrop-legendary .npc-rank-badge{background:#672d38f2;color:#ffedb9;border-color:#dfbb72}.npc-backdrop-mythic .npc-rank-badge{background:#242942f2;color:#fff4d1;border-color:#f3dfad}