<div class="tv-prismatic-panel">
  <span class="tv-prismatic-panel-light" aria-hidden="true">
    <span class="tv-prismatic-panel-edge"></span>
    <span class="tv-prismatic-panel-fill"></span>
    <span class="tv-prismatic-panel-tint"></span>
    <span class="tv-prismatic-panel-sweep"></span>
  </span>
  <div class="tv-prismatic-panel-body">
    <h3 class="tv-prismatic-panel-title">Shrine blessing</h3>
    <p class="tv-prismatic-panel-text">+10% XP · +5% luck · ends in 2h 14m</p>
  </div>
  <span class="tv-prismatic-panel-corners" aria-hidden="true"></span>
</div>

.tv-prismatic-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  display: block;
  background: #020617;
  color: #e2e8f0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 10px 15px -3px #ddd6fe1a, 0 4px 6px -4px #ddd6fe1a;
}

.tv-prismatic-panel-light {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.tv-prismatic-panel-edge,
.tv-prismatic-panel-fill,
.tv-prismatic-panel-tint,
.tv-prismatic-panel-sweep {
  position: absolute;
  inset: 0;
}

/* Prismatic edge: a 2px rim of drifting cyan, violet and amber. */
.tv-prismatic-panel-edge {
  background: linear-gradient(to right, #a5f3fc, #c4b5fd, #fde68a);
  background-size: 300% 100%;
  opacity: 0.75;
  animation: tv-prismatic-panel-drift 12s ease-in-out infinite alternate;
}

.tv-prismatic-panel-fill {
  inset: 2px;
  background: #0f172ae6;
  box-shadow: inset 0 1px 0 #eee6ff33, inset 0 -2px 0 #070a11cc;
}

.tv-prismatic-panel-tint {
  inset: 2px;
  background: linear-gradient(to right, #a5f3fc26, #f5d0fe26, #fde68a26);
  background-size: 240% 100%;
  animation: tv-prismatic-panel-drift 12s ease-in-out infinite alternate;
}

/* A soft band of light that crosses the panel every 8 seconds. */
.tv-prismatic-panel-sweep {
  opacity: 0;
  animation: tv-prismatic-panel-sweep 8s ease-in-out infinite;
}

.tv-prismatic-panel-sweep::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  bottom: -1.5rem;
  left: 25%;
  width: 50%;
  transform: skewX(-12deg);
  background: linear-gradient(to right, #f5d0fe33, #fde68a4d, #a5f3fc33);
  filter: blur(24px);
}

.tv-prismatic-panel-body {
  position: relative;
  padding: 1rem 1.25rem;
}

.tv-prismatic-panel-title {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #f5f3ff;
}

.tv-prismatic-panel-text {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #e2e8f0;
}

/* Inner frame with four corner pieces: cyan, violet, fuchsia and amber. */
.tv-prismatic-panel-corners {
  position: absolute;
  inset: 6px;
  border: 1px solid #ddd6fe33;
  pointer-events: none;
  background:
    linear-gradient(135deg, #a5f3fc 3.5px, transparent 3.5px) top left,
    linear-gradient(225deg, #ddd6fe 3.5px, transparent 3.5px) top right,
    linear-gradient(315deg, #f5d0fe 3.5px, transparent 3.5px) bottom right,
    linear-gradient(45deg, #fde68a 3.5px, transparent 3.5px) bottom left;
  background-origin: border-box;
  background-size: 10px 10px;
  background-repeat: no-repeat;
}

@keyframes tv-prismatic-panel-drift {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@keyframes tv-prismatic-panel-sweep {
  0% { transform: translateX(-100%); opacity: 0; }
  10% { transform: translateX(-100%); opacity: 1; }
  85% { transform: translateX(100%); opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tv-prismatic-panel-edge,
  .tv-prismatic-panel-tint {
    animation: none;
  }

  .tv-prismatic-panel-sweep {
    display: none;
  }
}