/* Background art (ui/art.js). Scenes are inline SVG strings dropped into
   these containers. Set --realm-accent (e.g. from REALM_ACCENT) for borders. */

/* A card or panel with a realm scene behind its content. */
.realm-bg {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius, 18px);
}
.realm-bg > .realm-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  border-radius: inherit;
  pointer-events: none;
}
/* Soft veil in the card colour so text stays readable in light and dark mode. */
.realm-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--card, #fff) 55%, transparent),
    color-mix(in srgb, var(--card, #fff) 86%, transparent) 70%
  );
}

/* A 140px art strip with a title overlaid at the bottom left. */
.realm-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 140px;
  border-radius: var(--radius, 18px);
  border: 3px solid var(--realm-accent, var(--line, #e4e2da));
  display: flex;
  align-items: flex-end;
  padding: 12px 16px;
  box-sizing: border-box;
  color: #fff;
}
.realm-banner > .realm-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}
.realm-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 35%, rgb(20 14 40 / 62%));
}
.realm-banner :is(h1, h2, h3, .realm-banner-title) {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 0 #2b2140, 0 0 12px rgb(20 14 40 / 55%);
  overflow-wrap: anywhere;
}
.realm-banner .realm-banner-sub {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.92;
  text-shadow: 0 1px 0 #2b2140;
}

/* Her camp. */
.camp-scene {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius, 18px);
  border: 3px solid #2b2140;
  background: #15183f;
  aspect-ratio: 8 / 3;
  width: 100%;
  max-width: 100%;
}
.camp-scene > .camp-art {
  display: block;
  width: 100%;
  height: 100%;
}
.camp-art text {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* Subtle, CSS-only motion. */
.realm-art .art-twinkle use,
.camp-art .art-twinkle use {
  animation: art-twinkle 3.2s ease-in-out infinite;
  transform-box: fill-box;
}
.art-twinkle use:nth-child(2n) { animation-delay: -1.1s; }
.art-twinkle use:nth-child(3n) { animation-delay: -2.2s; }
.art-float { animation: art-float 6s ease-in-out infinite; }
.art-flicker { animation: art-flicker 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.art-glow { animation: art-glow 2.6s ease-in-out infinite; }
.art-wave { animation: art-glow 3s ease-in-out infinite; }
.art-wander { animation: art-wander 7s ease-in-out infinite; transform-box: fill-box; }
.art-d1 { animation-delay: -2s; }
.art-d2 { animation-delay: -4s; }

@keyframes art-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes art-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes art-flicker { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(0.96, 1.05); } 60% { transform: scale(1.03, 0.97); } }
@keyframes art-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }
@keyframes art-wander { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }

@media (prefers-reduced-motion: reduce) {
  .realm-art *, .camp-art * { animation: none !important; }
}