.site-fatal-layer,
.ancestor-selector-layer {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(5.5rem, 10vh, 7rem) 1rem 2rem;
  background: rgba(15, 32, 37, 0.28);
  backdrop-filter: blur(3px);
}

.site-fatal-layer {
  position: fixed;
  background: rgba(15, 28, 31, 0.78);
}

.site-fatal-card,
.ancestor-selector-scroll {
  width: min(920px, 94vw);
  padding: clamp(1.5rem, 3vw, 2.6rem) clamp(1.2rem, 4vw, 4rem);
  border: 1px solid rgba(222, 174, 73, 0.68);
  border-radius: 14px;
  color: #513619;
  text-align: center;
  background:
    linear-gradient(90deg, rgba(111, 46, 24, 0.18), transparent 8%, transparent 92%, rgba(111, 46, 24, 0.18)),
    linear-gradient(180deg, rgba(255, 249, 220, 0.97), rgba(239, 204, 124, 0.94));
  box-shadow:
    inset 0 0 36px rgba(125, 70, 26, 0.22),
    0 22px 70px rgba(4, 19, 26, 0.42);
}

.site-fatal-card {
  width: min(520px, 92vw);
}

.site-fatal-card strong,
.ancestor-selector-scroll h2 {
  color: #66421d;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
}

.site-fatal-card p,
.ancestor-selector-copy {
  margin: 0.65rem 0 1.1rem;
  color: rgba(77, 52, 28, 0.78);
}

.site-fatal-card a,
.ancestor-selector-directory {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  border: 1px solid rgba(126, 78, 27, 0.36);
  border-radius: 999px;
  color: #68451f;
  background: rgba(255, 249, 224, 0.7);
  text-decoration: none;
}

.ancestor-selector-kicker {
  margin: 0 0 0.28rem;
  color: #95672b;
  font-size: 0.78rem;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
}

.ancestor-selector-scroll h2 {
  margin: 0;
}

.ancestor-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 0.8rem;
  max-height: min(50vh, 470px);
  margin: 1.2rem 0;
  padding: 0.2rem;
  overflow: auto;
}

.ancestor-selector-card {
  display: grid;
  justify-items: center;
  gap: 0.34rem;
  min-height: 164px;
  padding: 0.8rem 0.55rem;
  border: 1px solid rgba(143, 96, 38, 0.35);
  border-radius: 12px;
  color: #58391b;
  background: rgba(255, 252, 231, 0.7);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.ancestor-selector-card:hover,
.ancestor-selector-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(82, 54, 23, 0.2);
}

.ancestor-selector-portrait {
  display: grid;
  width: 82px;
  height: 100px;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(196, 147, 62, 0.5);
  border-radius: 42px 42px 10px 10px;
  color: #89602c;
  background: rgba(221, 232, 214, 0.75);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 2rem;
}

.ancestor-selector-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ancestor-selector-card strong {
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 1.12rem;
}

.ancestor-selector-card small {
  color: rgba(76, 53, 30, 0.68);
}

.ancestor-selector-no-photo {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  align-content: center;
  gap: 0.15rem;
}

.ancestor-selector-no-photo small {
  font-family: system-ui, sans-serif;
  font-size: 0.7rem;
}

.ancestor-selector-check {
  display: none;
  color: #356348;
  font-size: 0.78rem;
  font-weight: 700;
}

.ancestor-selector-card.is-selected {
  border-color: #356348;
  box-shadow: 0 0 0 3px rgba(53, 99, 72, 0.2);
}

.ancestor-selector-card.is-selected .ancestor-selector-check {
  display: block;
}

.ancestor-selector-confirm {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  margin: 0 0.5rem 0.8rem;
  padding: 0 1.4rem;
  border: 1px solid rgba(105, 68, 24, 0.5);
  border-radius: 999px;
  color: #fff7da;
  background: linear-gradient(180deg, #9b6a2c, #684018);
  font: inherit;
  cursor: pointer;
}

.ancestor-selector-confirm:disabled {
  color: rgba(79, 57, 31, 0.62);
  background: rgba(232, 216, 174, 0.72);
  cursor: not-allowed;
}

.ancestor-selector-empty {
  grid-column: 1 / -1;
  padding: 2rem;
}

.ancestor-context-card {
  position: absolute;
  z-index: 62;
  top: clamp(76px, 9vh, 104px);
  left: 50%;
  display: flex;
  min-width: 210px;
  align-items: center;
  gap: 0.62rem;
  padding: 0.42rem 0.58rem;
  border: 1px solid rgba(222, 181, 96, 0.58);
  border-radius: 999px;
  transform: translateX(-50%);
  color: #573b20;
  background: rgba(255, 248, 220, 0.86);
  box-shadow: 0 8px 24px rgba(20, 39, 43, 0.25);
  backdrop-filter: blur(8px);
}

.ancestor-context-card img,
.ancestor-context-initial {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.ancestor-context-initial {
  display: grid;
  place-items: center;
  color: #785224;
  background: #dce8db;
  font-family: "STKaiti", "KaiTi", serif;
}

.ancestor-context-text {
  display: grid;
  min-width: 82px;
  line-height: 1.1;
}

.ancestor-context-text small {
  margin-bottom: 0.18rem;
  color: rgba(82, 56, 30, 0.65);
  font-size: 0.68rem;
}

.ancestor-context-text strong {
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 1rem;
}

.ancestor-context-card a {
  padding: 0.34rem 0.48rem;
  border-left: 1px solid rgba(110, 75, 34, 0.18);
  color: #86602e;
  font-size: 0.72rem;
  text-decoration: none;
}

.modal-portrait {
  display: grid;
  width: 112px;
  height: 138px;
  place-items: center;
  margin: 0.8rem auto 1rem;
  overflow: hidden;
  border: 2px solid rgba(198, 153, 70, 0.52);
  border-radius: 56px 56px 12px 12px;
  color: #7f5b2c;
  background: rgba(219, 231, 214, 0.72);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 2.2rem;
  box-shadow: 0 10px 24px rgba(55, 46, 31, 0.16);
}

.modal-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.toast.is-error {
  color: #fff3ee;
  background: rgba(127, 39, 31, 0.9);
}

@media (max-width: 700px) {
  .ancestor-selector-layer {
    position: fixed;
    z-index: 1000;
    align-items: start;
    padding: calc(var(--mobile-topbar-height) + var(--mobile-safe-top) + 12px)
      max(10px, var(--mobile-safe-right))
      max(16px, var(--mobile-safe-bottom))
      max(10px, var(--mobile-safe-left));
    overflow: auto;
  }

  .ancestor-selector-scroll {
    width: 100%;
    max-height: calc(100svh - var(--mobile-topbar-height) - var(--mobile-safe-top) - 28px);
    padding: 20px 14px;
    overflow: auto;
    border-radius: 16px;
  }

  .ancestor-selector-scroll h2 {
    font-size: clamp(1.52rem, 7vw, 2rem);
  }

  .ancestor-selector-copy {
    font-size: 0.94rem;
    line-height: 1.65;
  }

  .ancestor-selector-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
    gap: 12px;
  }

  .ancestor-selector-card {
    min-height: 190px;
    padding: 12px 8px;
    font-size: 17px;
  }

  .ancestor-selector-portrait {
    width: min(92px, 26vw);
    height: min(112px, 31vw);
  }

  .ancestor-selector-portrait img {
    object-fit: contain;
    object-position: center bottom;
  }

  .ancestor-selector-card strong {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 17px;
  }

  .ancestor-selector-confirm {
    width: 100%;
    min-height: 56px;
    margin: 0 0 12px;
    padding-inline: 12px;
    font-size: 17px;
  }

  .ancestor-selector-directory {
    min-height: 48px;
    font-size: 16px;
  }

  .ancestor-context-card {
    position: fixed;
    z-index: 960;
    top: calc(var(--mobile-topbar-height) + var(--mobile-safe-top) + 8px);
    width: min(300px, calc(100vw - 24px));
    min-width: 0;
    min-height: 72px;
    padding: 8px 10px;
  }

  .ancestor-context-card img,
  .ancestor-context-initial {
    width: 48px;
    height: 48px;
  }

  .ancestor-context-text {
    min-width: 0;
    flex: 1 1 auto;
  }

  .ancestor-context-text small {
    font-size: 0.72rem;
  }

  .ancestor-context-text strong {
    overflow: hidden;
    font-size: 1.02rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ancestor-context-card a {
    display: inline-flex;
    min-width: 54px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    font-size: 0.86rem;
  }
}