/* Personal pillar scene. The approved animal sprite and its correction layers are untouched. */
.result-pillar { margin: 1px 0 3px; color: #777e75; font-size: 12px; text-align: center; letter-spacing: -.02em; }
.story-copy p + p { margin-top: 12px; }
.result-art.personal-stage {
  position: relative;
  isolation: isolate;
  width: min(100%, 320px);
  max-width: 320px;
  height: 238px;
  margin: 2px auto 10px;
  --personal-core-y: 132px;
}

.personal-stage #result-sprite.sprite {
  position: absolute;
  z-index: 1;
  top: 18px;
  left: 50%;
  width: 200px;
  height: 200px;
  transform: translateX(-50%);
}

.personal-core {
  position: absolute;
  z-index: 3;
  top: var(--personal-core-y);
  left: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 3px;
  border: 1px solid var(--element-ink, #77766b);
  border-radius: 42% 58% 47% 53%;
  background: #fffdf8c9;
  box-shadow: 1px 2px 0 #ffffffb8, 0 0 0 3px var(--element-wash, #ebe9df88);
  transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none;
}

.personal-core-icon {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.personal-spirits {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.personal-spirit {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 78px;
  min-height: 62px;
  padding: 5px 4px 6px;
  border: 1px solid #b5b5a6a8;
  border-radius: 54% 44% 50% 46% / 47% 52% 44% 54%;
  background:
    repeating-linear-gradient(112deg, transparent 0 4px, #b5aa9052 4px 5px, transparent 5px 9px),
    #fffdf2ed;
  box-shadow: 1px 2px 0 #ffffffa6, 2px 3px 0 #9d9c8952;
  text-align: center;
  animation: personal-spirit-float 4.5s ease-in-out infinite alternate;
}

.personal-spirit:nth-child(1) {
  top: 10px;
  left: 0;
  transform: rotate(-7deg);
  animation-delay: -.6s;
}

.personal-spirit:nth-child(2) {
  top: 3px;
  right: 0;
  transform: rotate(6deg);
  animation-delay: -2.1s;
}

.personal-spirit:nth-child(3) {
  right: 0;
  bottom: 12px;
  transform: rotate(-4deg);
  animation-delay: -3.3s;
}

.personal-spirit-caption {
  display: block;
  color: #656a60;
  font: 600 12px/1.1 'Poor Story', var(--body);
  white-space: nowrap;
}

.personal-spirit-glyphs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 28px;
}

.personal-glyph {
  position: relative;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 44% 56% 49% 51%;
  background: var(--element-wash, #e7e4da80);
}

.personal-glyph-icon {
  position: absolute;
  inset: 2px;
  display: block;
  width: 23px;
  height: 23px;
  object-fit: contain;
  opacity: .25;
}

.personal-glyph-char {
  position: relative;
  z-index: 1;
  color: var(--element-ink, #4e554d);
  font: 600 20px/1 'Gowun Dodum', var(--body);
  text-shadow: 0 1px #fffdf8, 1px 0 #fffdf8, -1px 0 #fffdf8;
  white-space: nowrap;
}

.personal-spirit-unknown,
.personal-glyph.is-unknown {
  width: auto;
  height: auto;
  min-height: 25px;
  padding: 3px 5px;
  border: 1px dashed #bcb9aa;
  border-radius: 9px;
  background: #fffdf8de;
  color: #676b64;
  font: 600 12px/1.35 'Poor Story', var(--body);
  white-space: nowrap;
}

.personal-core[data-element='wood'],
.personal-glyph[data-element='wood'] { --element-ink: #34764c; --element-wash: #a8cda682; }
.personal-core[data-element='fire'],
.personal-glyph[data-element='fire'] { --element-ink: #b84b47; --element-wash: #e9aaa080; }
.personal-core[data-element='earth'],
.personal-glyph[data-element='earth'] { --element-ink: #96721b; --element-wash: #ead18c80; }
.personal-core[data-element='metal'],
.personal-glyph[data-element='metal'] { --element-ink: #646c74; --element-wash: #cbd0d187; }
.personal-core[data-element='water'],
.personal-glyph[data-element='water'] { --element-ink: #315f89; --element-wash: #a5bfd386; }

@keyframes personal-spirit-float {
  from { translate: 0 0; }
  to { translate: 0 -4px; }
}

/* Below a narrow two-page layout, keep the three names in a legible row. */
@media (max-width: 780px) {
  .result-art.personal-stage {
    width: min(100%, 300px);
    max-width: 300px;
    height: 264px;
    --personal-core-y: 112px;
  }

  .personal-stage #result-sprite.sprite {
    top: 0;
    width: 170px;
    height: 170px;
  }

  .personal-spirits {
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    align-items: stretch;
  }

  .personal-spirit,
  .personal-spirit:nth-child(1),
  .personal-spirit:nth-child(2),
  .personal-spirit:nth-child(3) {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    min-height: 61px;
    transform: none;
  }
}

@media (max-width: 380px) {
  .result-art.personal-stage { height: 252px; --personal-core-y: 107px; }
  .personal-stage #result-sprite.sprite { width: 162px; height: 162px; }
  .personal-spirit { padding-inline: 2px; }
  .personal-spirit-caption { font-size: 11px; }
  .personal-glyph { width: 25px; height: 25px; }
  .personal-glyph-icon { width: 21px; height: 21px; }
  .personal-glyph-char { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .personal-spirit { animation: none; }
}