/* HFL Locks – Phase 2 (Transitions & Fallbacks) */
.hfl-locked-overlay.hfl-fadeout {
  opacity: 0;
  transition: opacity 4s ease;
  pointer-events: none;
}

/* =========================
   Unlocked-Badge via CSS
   ========================= */
.activity-content[data-hfl-unlocked] {
  position: relative; /* Anker für ::after */
}

/* Badge oben rechts als PNG, ohne <img> */
.activity-content::after {
  content: "";
  position: absolute;
  z-index: 4;
  right: 16px;
  top: 14px;

  /* Breite dynamisch, Höhe via AR -> ~2.76:1 */
  width: clamp(86px, 12vw, 128px);
  aspect-ratio: 276 / 100;

  background-image: url("https://app.luca1998s.com/wp-content/uploads/2025/10/unlocked-text.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  pointer-events: none;

  /* Start: unsichtbar */
  opacity: 0;
  transition: opacity 1s ease;
}

/* Wenn unlocked -> Fade-in */
.activity-content[data-hfl-unlocked="1"]::after {
  opacity: 1;
}

@media (max-width: 768px){
  .activity-content[data-hfl-unlocked="1"]::after{
    right: 10px;
    top: 10px;
    transform: scale(0.84);
    transform-origin: top right;
    width: clamp(86px, 38vw, 128px);
    aspect-ratio: 276 / 100;
  }
}

/* Preload OHNE Konflikt mit page backgrounds */
html::after{
  content: "";
  position: fixed;
  width: 0; height: 0; overflow: hidden;
  background-image: url("https://app.luca1998s.com/wp-content/uploads/2025/10/unlocked-text.png");
}