.spleen-hero {
  background:
    radial-gradient(circle at 88% 12%, rgb(151 70 78 / 9%), transparent 30rem),
    var(--color-surface);
}

.spleen-path span {
  border-color: rgb(151 70 78 / 24%);
  background: rgb(151 70 78 / 7%);
}

.spleen-visual {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 24% 35%, rgb(247 225 224) 0 3%, transparent 3.4%),
    radial-gradient(circle at 64% 62%, rgb(247 225 224) 0 4%, transparent 4.4%),
    linear-gradient(145deg, #7f3440, #a9555d 55%, #79303c);
  box-shadow: inset 0 0 0 10px rgb(255 255 255 / 12%);
}

.spleen-visual::before {
  position: absolute;
  inset: 14px;
  border: 5px solid rgb(244 214 207 / 72%);
  border-radius: 44% 51% 46% 50%;
  content: "";
}

.spleen-white-pulp {
  position: absolute;
  width: 86px;
  height: 72px;
  border: 8px solid rgb(228 185 183 / 66%);
  border-radius: 50%;
  background: #f6e3df;
  box-shadow: 0 0 0 5px rgb(255 240 233 / 25%);
}

.spleen-white-pulp--one {
  top: 24%;
  left: 18%;
}

.spleen-white-pulp--two {
  right: 18%;
  bottom: 20%;
  width: 104px;
  height: 84px;
}

.spleen-white-pulp::before {
  position: absolute;
  top: 50%;
  left: 8px;
  width: 70%;
  height: 8px;
  border-radius: 999px;
  background: #6e3b52;
  content: "";
  transform: rotate(-18deg);
}

.spleen-white-pulp::after {
  position: absolute;
  top: 16px;
  right: 13px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff3da;
  box-shadow: 0 0 0 5px rgb(150 95 109 / 25%);
  content: "";
}

.spleen-cord {
  position: absolute;
  width: 76px;
  height: 4px;
  border-radius: 999px;
  background: rgb(255 216 205 / 54%);
  transform: rotate(var(--cord-angle));
}

.spleen-cord:nth-of-type(3) {
  top: 18%;
  left: 48%;
  --cord-angle: 28deg;
}

.spleen-cord:nth-of-type(4) {
  top: 52%;
  left: 10%;
  --cord-angle: -16deg;
}

.spleen-cord:nth-of-type(5) {
  right: 32%;
  bottom: 14%;
  --cord-angle: 12deg;
}

.spleen-landmark-focus {
  position: absolute;
  z-index: 2;
  border: 3px solid #f6c574;
  border-radius: 999px;
  box-shadow: 0 0 0 6px rgb(246 197 116 / 20%);
}

.spleen-visual[data-landmark="capsule_trabeculae"] .spleen-landmark-focus {
  inset: 19px;
  border-radius: 44% 51% 46% 50%;
}

.spleen-visual[data-landmark="red_pulp"] .spleen-landmark-focus {
  top: 45%;
  left: 43%;
  width: 32%;
  height: 22%;
}

.spleen-visual[data-landmark="pals"] .spleen-landmark-focus,
.spleen-visual[data-landmark="central_arteriole"] .spleen-landmark-focus {
  top: 30%;
  left: 20%;
  width: 62px;
  height: 38px;
}

.spleen-visual[data-landmark="follicle_germinal_center"] .spleen-landmark-focus {
  right: 20%;
  bottom: 22%;
  width: 44px;
  height: 44px;
}

.spleen-visual[data-landmark="marginal_zone"] .spleen-landmark-focus {
  right: 16%;
  bottom: 17%;
  width: 112px;
  height: 92px;
}

.image-gate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.image-gate {
  min-height: 100%;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.image-gate:hover,
.image-gate:focus-visible,
.image-gate.is-visited {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(27 91 99 / 10%);
}

.image-gate__number {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-3);
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

.image-gate small {
  display: block;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.image-gate-status {
  margin-top: var(--space-4);
  color: var(--color-primary);
  font-weight: 700;
}

.release-result {
  padding: var(--space-5);
  border: 1px solid #d7b36d;
  border-radius: var(--radius-lg);
  background: #fff9ec;
}

.release-result.is-blocked {
  border-color: #d8a29d;
  background: #fff4f2;
}

@media (max-width: 960px) {
  .image-gate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .image-gate-grid {
    grid-template-columns: 1fr;
  }

  .spleen-visual {
    min-height: 250px;
  }
}

@media (max-width: 480px) {
  .spleen-visual {
    min-height: 215px;
  }

  .spleen-white-pulp {
    transform: scale(0.84);
  }

  .image-gate {
    padding: var(--space-4);
  }
}