.game-card-live {
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: background .25s ease;
}

.game-card-live:hover,
.game-card-live:focus-visible { background: var(--raised); }

.game-card-live:focus-visible {
  z-index: 2;
  outline: 1px solid var(--moss-light);
  outline-offset: -1px;
}

.game-card-live .game-cover { transition: filter .35s ease; }
.game-card-live:hover .game-cover { filter: brightness(1.16); }
.game-card-live .game-info p span { display: inline-block; transition: transform .18s ease; }
.game-card-live:hover .game-info p span { transform: translate(3px, -3px); }

.skyward-cover {
  isolation: isolate;
  background:
    repeating-linear-gradient(to bottom, rgba(203,217,173,.025) 0 1px, transparent 2px 6px),
    radial-gradient(circle at 50% 74%, rgba(145,168,121,.18), transparent 36%),
    #050806;
}

.skyward-cover::before {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  content: "";
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.7));
}

.skyward-stars {
  position: absolute;
  inset: 0;
  opacity: .55;
  background-image:
    radial-gradient(circle at 16% 18%, var(--moss-light) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 22%, var(--moss-light) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 42%, var(--moss-light) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 52%, var(--moss-light) 0 1px, transparent 2px),
    radial-gradient(circle at 12% 66%, var(--moss-light) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 72%, var(--moss-light) 0 1px, transparent 2px);
}

.skyward-enemies {
  position: absolute;
  top: 25%;
  left: 50%;
  z-index: 2;
  width: min(72%, 380px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 42px;
  transform: translateX(-50%);
}

.skyward-enemies span {
  position: relative;
  width: 42px;
  height: 28px;
  justify-self: center;
  background: var(--moss-light);
  opacity: .76;
  clip-path: polygon(20% 0, 80% 0, 80% 18%, 100% 18%, 100% 76%, 78% 76%, 78% 100%, 61% 100%, 61% 78%, 39% 78%, 39% 100%, 22% 100%, 22% 76%, 0 76%, 0 18%, 20% 18%);
  filter: drop-shadow(0 0 7px rgba(203,217,173,.24));
}

.skyward-enemies span:nth-child(n+4) { opacity: .48; transform: translateX(14px); }

.skyward-shot {
  position: absolute;
  bottom: 34%;
  left: 50%;
  z-index: 2;
  width: 3px;
  height: 54px;
  background: var(--moss-light);
  box-shadow: 0 0 13px rgba(203,217,173,.7);
}

.skyward-guardian {
  position: absolute;
  bottom: 17%;
  left: 50%;
  z-index: 2;
  width: 78px;
  height: 42px;
  background: var(--moss-light);
  opacity: .9;
  clip-path: polygon(44% 0, 56% 0, 56% 24%, 72% 24%, 72% 43%, 92% 43%, 92% 62%, 100% 62%, 100% 100%, 0 100%, 0 62%, 8% 62%, 8% 43%, 28% 43%, 28% 24%, 44% 24%);
  filter: drop-shadow(0 0 12px rgba(203,217,173,.38));
  transform: translateX(-50%);
}

.skyward-guardian::after {
  position: absolute;
  right: -420%;
  bottom: -22px;
  left: -420%;
  height: 1px;
  background: rgba(203,217,173,.2);
  content: "";
}

.rune-rally-cover {
  isolation: isolate;
  background:
    repeating-linear-gradient(to bottom, rgba(203,217,173,.025) 0 1px, transparent 2px 6px),
    radial-gradient(circle at 50% 50%, rgba(145,168,121,.18), transparent 42%),
    #050806;
}

.rune-rally-cover::before {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  content: "";
  background: radial-gradient(ellipse at center, transparent 44%, rgba(0,0,0,.72));
}

.rally-axis {
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  border-left: 1px dashed rgba(203,217,173,.32);
}

.rally-axis::before,
.rally-axis::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 110px;
  aspect-ratio: 1;
  border: 1px solid rgba(203,217,173,.22);
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}
.rally-axis::after { width: 56px; border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); }

.rally-gate {
  position: absolute;
  top: 50%;
  width: 13px;
  height: 118px;
  border: 1px solid currentColor;
  color: var(--moss-light);
  transform: translateY(-50%);
  filter: drop-shadow(0 0 9px rgba(203,217,173,.34));
}
.rally-gate-left { left: 13%; }
.rally-gate-right { right: 13%; color: var(--ember); }
.rally-gate::before,
.rally-gate::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}
.rally-gate::after { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rally-gate span { position: absolute; inset: 9px 3px; background: currentColor; opacity: .75; }

.rally-orb {
  position: absolute;
  top: 42%;
  left: 58%;
  width: 18px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--moss-light);
  box-shadow:
    -35px 17px 0 -6px rgba(203,217,173,.28),
    -68px 32px 0 -8px rgba(203,217,173,.14),
    0 0 25px rgba(203,217,173,.7);
}

@media (max-width: 680px) {
  .skyward-enemies { gap: 25px 20px; }
  .skyward-enemies span { width: 36px; height: 24px; }
  .rally-gate-left { left: 16%; }
  .rally-gate-right { right: 16%; }
}