/* ===========================
   HFL Level Up Toast (Slim & Clean)
   =========================== */

#hfl-levelup-stack {
  position: fixed;
  top: 30px; 
  right: 16px;
  z-index: 999999;
  display: flex; 
  flex-direction: column; 
  gap: 12px;
  pointer-events: none;
}

/* Base Card Style */
.hfl-levelup-toast {
  --grad: linear-gradient(90deg,#f24f7c 0%, #7b5ed6 50%, #22c1d6 100%);
  position: relative;
  display: flex; 
  align-items: center; 
  gap: 14px;
  
  /* === SCHMALERE BOX (Kein GIF mehr) === */
  min-width: min(80vw, 300px); /* Mobile schmaler */
  max-width: min(90vw, 360px);
  padding: 14px 16px 14px 14px;
  
  color: #fff; 
  background: var(--grad);
  border-radius: 16px; 
  box-shadow: 0 12px 36px rgba(0,0,0,.28);
  pointer-events: auto; 
  overflow: hidden;
  will-change: transform, box-shadow, filter;
  animation: hfl-slide-in-right .48s ease-out both;
  
  font-family: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Geopattern Overlay */
.hfl-levelup-toast::before {
  content: "";
  position: absolute; inset: 0; opacity: .55; pointer-events: none;
  background-image: url('https://app.luca1998s.com/wp-content/plugins/youzify/includes/public/assets/images/geopattern.png');
  background-size: 240px auto; background-position: center; background-repeat: repeat;
  z-index: 0;
}

/* GIF WURDE ENTFERNT (Code gelöscht) */

/* Icon (Rank Badge) - Rund & Transparent */
.hfl-levelup-toast .hfl-lvl-icon {
  flex: 0 0 auto; 
  width: 44px; 
  height: 44px; 
  border-radius: 50%;
  background-position: center; 
  background-size: contain; 
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.18));
  background-color: transparent; 
  position: relative;
  z-index: 2;
}

/* Text Container */
.hfl-levelup-toast .hfl-lvl-text {
  display: flex; flex-direction: column; gap: 4px;
  /* Margin rechts reduziert, da kein GIF mehr da ist, nur Platz für das X */
  margin-right: 30px; 
  position: relative;
  z-index: 2;
}

/* Line 1: Title */
.hfl-levelup-toast .hfl-lvl-line1 {
  font-weight: 600; letter-spacing: .1px;
  font-size: clamp(14px, 2.7vw, 17px);
  line-height: 1.15;
}

.hfl-levelup-toast .hfl-lvl-line1 i {
  font-style: italic;
  font-weight: 800;
}

/* Line 2: Chip Container */
.hfl-levelup-toast .hfl-lvl-line2 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-weight: 600; letter-spacing: .08em;
  font-size: clamp(12px, 2.4vw, 14px);
}

/* The Chip */
.hfl-levelup-toast .hfl-lvl-chip {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .38rem .8rem; border-radius: 999px;
  background: rgba(255,255,255,.14); backdrop-filter: blur(2px);
  font-weight: 800;
  text-transform: none; 
  letter-spacing: .04em;
  white-space: nowrap; 
}

/* Close Button */
.hfl-levelup-toast .hfl-lvl-close {
  position: absolute; top: 8px; right: 10px; width: 28px; height: 28px;
  color: #fff; opacity: .7; font-size: 18px; line-height: 28px; text-align: center;
  cursor: pointer; user-select: none; 
  z-index: 10;
}

/* Desktop Adjustment */
@media (min-width: 992px){
  .hfl-levelup-toast {
    /* Viel schmaler als vorher (war 520px) */
    min-width: 380px; max-width: 380px;
    padding: 20px 24px;
  }
  .hfl-levelup-toast .hfl-lvl-icon { width: 54px; height: 54px; }
  
  /* Text Margin angepasst */
  .hfl-levelup-toast .hfl-lvl-text { margin-right: 30px; }
  
  .hfl-levelup-toast .hfl-lvl-line1 { font-size: 19px; }
  .hfl-levelup-toast .hfl-lvl-line2 { font-size: 16px; }
  .hfl-levelup-toast .hfl-lvl-chip { padding: .5rem 1rem; }
}

/* Animations */
@keyframes hfl-slide-in-right {
  from{ transform: translateX(120%) }
  to  { transform: translateX(0) }
}

.hfl-levelup-toast.is-hiding { 
  animation: hfl-slide-out-right .48s ease-in forwards !important; 
}
@keyframes hfl-slide-out-right {
  to{ transform: translateX(120%) }
}

.hfl-levelup-toast.do-glow {
  animation: hfl-flash-glow 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes hfl-flash-glow {
  0% { box-shadow: 0 12px 36px rgba(0,0,0,.28); filter: brightness(1); }
  50% { box-shadow: 0 0 50px rgba(255, 255, 255, 0.8), 0 0 80px rgba(34, 193, 214, 0.6); filter: brightness(1.3) contrast(1.1); border: 1px solid rgba(255,255,255,0.6); }
  100% { box-shadow: 0 12px 36px rgba(0,0,0,.28); filter: brightness(1); }
}