.sunshard-cover {
  isolation: isolate;
  background:
    repeating-linear-gradient(to bottom, rgba(255,215,138,.025) 0 1px, transparent 2px 6px),
    radial-gradient(circle at 50% 26%, rgba(218,125,62,.24), transparent 42%),
    #090503;
}

.sunshard-cover::before {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  content: "";
  background: radial-gradient(ellipse at center, transparent 43%, rgba(0,0,0,.74));
}

.sunshard-halo {
  position: absolute;
  top: 42%;
  left: 50%;
  width: min(88%, 360px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,215,138,.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.sunshard-halo::before,
.sunshard-halo::after,
.sunshard-halo span::before,
.sunshard-halo span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 118%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,215,138,.16), transparent);
  content: "";
  transform: translate(-50%, -50%);
}
.sunshard-halo::after { transform: translate(-50%, -50%) rotate(90deg); }
.sunshard-halo span::before { transform: translate(-50%, -50%) rotate(45deg); }
.sunshard-halo span::after { transform: translate(-50%, -50%) rotate(-45deg); }
.sunshard-halo span { position: absolute; inset: 22%; border: 1px solid rgba(255,215,138,.18); border-radius: 50%; }

.sunshard-wall {
  position: absolute;
  top: 23%;
  left: 50%;
  z-index: 2;
  width: 76%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  transform: translateX(-50%);
}

.sunshard-wall span {
  height: 24px;
  border: 1px solid rgba(255,225,184,.34);
  background: linear-gradient(#9e5428, #4b2411);
  box-shadow: inset 0 0 8px rgba(255,215,138,.12);
}
.sunshard-wall span:nth-child(2),
.sunshard-wall span:nth-child(7),
.sunshard-wall span:nth-child(9) { opacity: .48; }
.sunshard-wall span:nth-child(5),
.sunshard-wall span:nth-child(12) { visibility: hidden; }

.sunshard-orb {
  position: absolute;
  top: 62%;
  left: 56%;
  z-index: 3;
  width: 16px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff1c4;
  box-shadow:
    -18px 22px 0 -5px rgba(255,215,138,.26),
    -34px 43px 0 -7px rgba(255,215,138,.12),
    0 0 24px rgba(255,215,138,.82);
}

.sunshard-altar {
  position: absolute;
  bottom: 15%;
  left: 50%;
  z-index: 3;
  width: 96px;
  height: 18px;
  background: linear-gradient(#fff1c4, #da7d3e);
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 82% 100%, 18% 100%, 0 50%);
  filter: drop-shadow(0 0 9px rgba(255,215,138,.44));
  transform: translateX(-50%);
}