/* Wildkin 3D — render portraits and the WebGL sanctuary smoothly. */
.canvas-wrap canvas {
  image-rendering: auto;
  object-fit: cover;
  object-position: center;
  filter: none;
}
.map-panel:not(.expanded) .map-dpad { display: none; }

.creature-art {
  display: block;
  max-width: 100%;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  filter: drop-shadow(0 3px 3px #041b3b38);
}

.parent-slot > .creature-art,
.nursery-info .parent-slot > .creature-art {
  width: 66px;
  height: 66px;
}
.home-den .parent-slot > .creature-art { width: 50px; height: 50px; }
.parent-mini-row > .creature-art { width: 40px; height: 40px; }
.home-den .parent-mini-row > .creature-art { width: 32px; height: 32px; }
.monster-card > .creature-art { width: 66px; height: 66px; }

.book-card .sprite-wrap {
  background: radial-gradient(ellipse at 50% 70%, #a0d8e743, #80badd13 43%, transparent 70%);
}
.book-card .sprite-wrap .creature-art {
  width: 105px;
  height: 105px;
  transition: transform .2s ease;
}
.book-card:hover .sprite-wrap .creature-art { transform: translateY(-5px); }
.book-card.locked .sprite-wrap .creature-art {
  filter: brightness(0) saturate(0);
  opacity: .28;
}
.choice .creature-art { width: 75px; height: 75px; }
.creature-stage .creature-art {
  width: 145px;
  height: 145px;
  animation: bob 3s ease-in-out infinite;
}
.encounter-stage .creature-art {
  width: 145px;
  height: 145px;
  animation: bob 2.5s ease-in-out infinite;
}
.encounter-stage.shake .creature-art { animation: shake .3s; }
.result-art .creature-art {
  width: 170px;
  height: 170px;
  animation: arrive .6s ease-out;
}

/* Soft shell, rounded markings, and a reflected lavender rim. */
.egg-art {
  border: 2px solid #8571a5;
  background:
    radial-gradient(ellipse at 30% 29%, #b39acb 0 9%, transparent 10%),
    radial-gradient(ellipse at 67% 61%, #a287bc 0 11%, transparent 12%),
    radial-gradient(ellipse at 29% 76%, #aa91c7 0 7%, transparent 8%),
    radial-gradient(ellipse at 73% 17%, #bda6d3 0 5%, transparent 6%),
    radial-gradient(ellipse at 32% 25%, #fff8fc 0, #f1e3f4 27%, #dbc4e5 56%, #b795cb 82%, #9c7db4 100%);
  box-shadow:
    inset 3px 3px 5px #fff7ffb3,
    inset -5px -7px 8px #82609e59,
    0 5px 5px #081b413d;
}
.egg-art::before {
  width: 10px;
  height: 22px;
  top: 8px;
  left: 8px;
  border-radius: 50%;
  background: linear-gradient(#ffffffb3, #ffffff10);
  box-shadow: none;
  transform: rotate(25deg);
  opacity: .9;
}
.egg-art::after {
  width: 14px;
  height: 28px;
  top: auto;
  bottom: 5px;
  left: auto;
  right: 3px;
  border-radius: 50%;
  background: linear-gradient(150deg, transparent, #efd8ff73);
  box-shadow: none;
  transform: rotate(25deg);
}
.egg-preview::before {
  background: radial-gradient(ellipse, #d4a7ff61, #7951b338 45%, transparent 72%);
}
.ready .egg-art {
  box-shadow:
    inset 3px 3px 5px #fffaffc9,
    inset -5px -7px 8px #82609e59,
    0 0 20px #ffe1a866,
    0 5px 7px #081b414d;
}

@media (min-width: 420px) {
  .book-card .sprite-wrap .creature-art { width: 118px; height: 118px; }
}
@media (max-width: 359px) {
  .monster-card > .creature-art { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .creature-art { animation: none !important; transition: none !important; }
}

/* Immediate touch feedback; no scene rebuild when returning to a cached island. */
button,a,[role="button"]{touch-action:manipulation}
.island-loading{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;background:linear-gradient(150deg,#12689d,#62b9c8);color:#fff4d4;font:600 15px system-ui;letter-spacing:.02em}
@media(hover:none){.btn:hover,.monster-card:hover{transform:none}}