.hbr5 {
  --c-orange: #efa54e;
  --c-green: #8fc587;
  --c-teal: #2b9db6;
  --c-pink: #d98ab8;
  --c-gold: #f5d23c;
  position: relative;
  width: min(90vw, 620px);
  aspect-ratio: 1730 / 1832;
  isolation: isolate;
}
.hbr5 img,
.hbr5 .hbr5-layer {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.hbr5 img { height: auto; }

.hbr5 .p-bal0  { left: 0.578%;  top: 36.736%; width: 25.896%; }
.hbr5 .p-bal1  { left: 15.549%; top: 53.002%; width: 26.474%; }
.hbr5 .p-bal2  { left: 76.012%; top: 27.456%; width: 23.353%; }
.hbr5 .p-bal3  { left: 70.173%; top: 44.978%; width: 24.798%; }
.hbr5 .p-nervy { left: 18.844%; top: 7.096%;  width: 65.318%; transform-origin: 50% 100%; }
.hbr5 .p-thb, .hbr5 .p-thf { left: 28.382%; top: 26.747%; width: 57.168%; transform-origin: 50% 66%; }
.hbr5 .p-5     { left: 2.948%;  top: 0.764%;  width: 55.376%; transform-origin: 50% 88%; }
.hbr5 .p-hbr   { left: 46.185%; top: 0.6%;    width: 40.983%; }

.hbr5 .hbr5-fifth { inset: 0; transform-origin: 44% 36%; z-index: 2; }
.hbr5 .p-5, .hbr5 .hbr5-fifth { will-change: transform; }
.hbr5 .hbr5-back  { inset: 0; z-index: 1; }
.hbr5 .hbr5-front { inset: 0; z-index: 3; pointer-events: none; }
.hbr5 .hbr5-fx    { inset: 0; z-index: 1; pointer-events: none; overflow: visible; }

.hbr5 .shine {
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.85) 47%, rgba(255,255,255,.95) 50%, transparent 58%) no-repeat;
  background-size: 260% 100%;
  background-position: 160% 0;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  mix-blend-mode: soft-light;
  opacity: 0;
}
.hbr5 .shine.p-5   { aspect-ratio: 958 / 1233; }
.hbr5 .shine.p-thf { aspect-ratio: 989 / 1177; }

.hbr5 .ring {
  position: absolute; left: 50%; top: 48%;
  width: 20%; aspect-ratio: 1; margin: -10% 0 0 -10%;
  border-radius: 50%; border: 6px solid var(--c-teal);
  opacity: 0;
}
.hbr5 .confetti { position: absolute; left: 50%; top: 48%; opacity: 0; }
.hbr5 .ring.at5 { left: 31%; top: 35%; }
.hbr5 .confetti { width: 2.4%; aspect-ratio: 1.6; border-radius: 2px; }

.hbr5.is-ready .p-anim { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .hbr5.is-ready .p-anim { opacity: 1; }
}