/* MONSTER CARD BACKDROPS - the ground behind every creature portrait: bestiary tiles, the bestiary
   card and the world-map roster. ONE layer element, `.mcard-bg`, made by
   `src/game/ui/monsterCardBackdrop.ts` and sitting under the portrait inside its plate. Tune here only;
   `.mcard-bg { display: none }` switches the whole thing off.

   ELEMENT GROUND (default; tiles and the map): a dark plate lit from its top-right corner in the
   element's colour, the element's sigil watermarked in that corner, a soft contact shadow.
   SCENE GROUND (`.has-scene`; the card): the creature's painted habitat, set inline by the module
   from `public/art/bestiary/<id>.svg` (tools/bestiary-scenes.mjs).
   An UNMET creature is `data-element="unknown"`: a lighter fog so its black silhouette reads, and no
   element or scene to give it away. */

.rpg-bestiary-art, .rpg-map-life-art { position: relative; isolation: isolate; }
.rpg-bestiary-art > img, .rpg-map-life-art > img { position: relative; z-index: 1;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.rpg-bestiary-art > img.is-silhouette, .rpg-map-life-art > img.is-silhouette {
  filter: brightness(0) drop-shadow(0 0 3px rgba(190,170,255,.35)); }

.mcard-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--mc-mid) 55%, transparent), transparent 65%),
              linear-gradient(160deg, #241d34, #120e1a); }
.mcard-bg::before { content: ''; position: absolute; inset: 0; opacity: .35;
  background: var(--mc-sigil, none) right 5px top 5px / 12px 12px no-repeat; }
.mcard-bg::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 45% 10% at 50% 88%, rgba(0,0,0,.4), transparent 70%); }

.mcard-bg[data-element="unknown"] {
  background: radial-gradient(ellipse 60% 65% at 50% 45%, #5a5478, #2a2540 80%); }

.mcard-bg.has-scene { background-position: center; background-size: cover; background-repeat: no-repeat; }
.mcard-bg.has-scene::before { content: none; }
.mcard-bg.has-scene::after {
  background: radial-gradient(ellipse 40% 9% at 50% 86%, rgba(0,0,0,.4), transparent 70%); }

.mcard-bg[data-element="fire"] { --mc-core: #ffd27a; --mc-mid: #e0572a; --mc-edge: #4a0f12;
  --mc-sigil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 C14 7 18 9 18 14 A6 6 0 0 1 6 14 C6 10 9 9 9 5 C11 7 11 9 12 10 C13 7 12 4 12 2Z' fill='%23fff'/%3E%3C/svg%3E"); }
.mcard-bg[data-element="water"] { --mc-core: #bff4ff; --mc-mid: #2a86c4; --mc-edge: #0a1c46;
  --mc-sigil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 C15 7 18 10 18 15 A6 6 0 0 1 6 15 C6 10 9 7 12 2Z' fill='%23fff'/%3E%3C/svg%3E"); }
.mcard-bg[data-element="earth"] { --mc-core: #f1dca0; --mc-mid: #8a6a36; --mc-edge: #2a1c10;
  --mc-sigil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 L21 8 L18 21 L6 21 L3 8Z' fill='%23fff'/%3E%3C/svg%3E"); }
.mcard-bg[data-element="wind"] { --mc-core: #eaffe0; --mc-mid: #5fb89a; --mc-edge: #0f2e33;
  --mc-sigil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9 H14 A3 3 0 1 0 11 6 M3 14 H18 A3 3 0 1 1 15 17 M3 19 H9' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }
.mcard-bg[data-element="neutral"] { --mc-core: #fff0d0; --mc-mid: #8c6aa8; --mc-edge: #1e1433;
  --mc-sigil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 L14 10 L21 12 L14 14 L12 21 L10 14 L3 12 L10 10Z' fill='%23fff'/%3E%3C/svg%3E"); }