/* FEAR SQUAD — Hell Portal V32
   Targeted restoration for the Hell Portal username effect.
   Loaded AFTER username-special-fx-public-v13.css so these rules only
   enhance Hell Portal and do not alter any other username effect. */

.uname.uname-fx-hellportal{
  --hp-red:#ff2a12;
  --hp-orange:#ff7a18;
  --hp-gold:#ffd45b;
  --hp-violet:#9d12d9;
  --hp-deep:#210006;
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  padding:.10em .28em .16em!important;
}

.uname.uname-fx-hellportal .uname-text{
  position:relative!important;
  z-index:5!important;
  display:inline-block!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  background:
    linear-gradient(96deg,
      #160003 0%,
      var(--hp-red) 14%,
      var(--hp-gold) 29%,
      #fff7cf 40%,
      var(--hp-orange) 54%,
      var(--hp-violet) 69%,
      var(--hp-red) 84%,
      #160003 100%)!important;
  background-size:360% 100%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-stroke:.55px rgba(255,205,105,.88)!important;
  text-shadow:
    0 1px 0 #180000,
    0 0 4px rgba(255,240,180,.92),
    0 0 9px rgba(255,75,20,.95),
    0 0 18px rgba(190,0,40,.86),
    0 0 28px rgba(130,0,180,.72)!important;
  filter:brightness(1.06) saturate(1.3)!important;
  animation:
    fearHellPortalText 1.85s linear infinite,
    fearHellPortalFlicker 2.4s steps(1,end) infinite!important;
}

/* Rotating infernal portal ring behind the username. */
.uname.uname-fx-hellportal::before{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  pointer-events:none!important;
  left:-.56em!important;
  right:-.56em!important;
  top:50%!important;
  width:auto!important;
  height:1.92em!important;
  opacity:.96!important;
  border-radius:50%!important;
  background:
    conic-gradient(from 0deg,
      transparent 0 8deg,
      rgba(255,35,10,.98) 17deg,
      rgba(255,214,80,.98) 36deg,
      transparent 55deg 76deg,
      rgba(160,15,215,.95) 96deg,
      rgba(255,65,12,.98) 126deg,
      transparent 151deg 174deg,
      rgba(255,210,68,.98) 197deg,
      rgba(145,0,195,.93) 226deg,
      transparent 252deg 284deg,
      rgba(255,45,9,.98) 309deg,
      rgba(255,223,100,.98) 338deg,
      transparent 360deg)!important;
  -webkit-mask:radial-gradient(ellipse at center,transparent 0 47%,#000 50% 63%,transparent 67%)!important;
  mask:radial-gradient(ellipse at center,transparent 0 47%,#000 50% 63%,transparent 67%)!important;
  transform:translateY(-50%) rotate(0deg) scaleX(1.02)!important;
  transform-origin:50% 50%!important;
  filter:
    drop-shadow(0 0 3px rgba(255,220,100,.95))
    drop-shadow(0 0 7px rgba(255,55,12,.95))
    drop-shadow(0 0 14px rgba(145,0,195,.85))!important;
  animation:fearHellPortalSpin 2.15s linear infinite!important;
}

/* Ember + cinder field in front of / around the letters. */
.uname.uname-fx-hellportal::after{
  content:""!important;
  position:absolute!important;
  z-index:6!important;
  pointer-events:none!important;
  left:-.42em!important;
  right:-.42em!important;
  top:-.48em!important;
  bottom:-.48em!important;
  width:auto!important;
  height:auto!important;
  color:transparent!important;
  font-size:0!important;
  opacity:.95!important;
  background:
    radial-gradient(circle at 9% 76%,#fff7bd 0 1.2px,#ff5a12 1.8px,transparent 3.2px),
    radial-gradient(circle at 19% 22%,#ffd65c 0 1px,#ff3210 1.6px,transparent 3px),
    radial-gradient(circle at 33% 84%,#fff1a0 0 1.1px,#a90bd8 1.7px,transparent 3.1px),
    radial-gradient(circle at 48% 15%,#fff7d4 0 1.25px,#ff5012 1.9px,transparent 3.4px),
    radial-gradient(circle at 62% 78%,#ffd24e 0 1px,#ff2411 1.6px,transparent 3px),
    radial-gradient(circle at 76% 27%,#fff 0 1.1px,#a70ad5 1.8px,transparent 3.2px),
    radial-gradient(circle at 91% 69%,#ffe277 0 1.2px,#ff3a11 1.9px,transparent 3.4px)!important;
  background-repeat:no-repeat!important;
  text-shadow:none!important;
  filter:
    drop-shadow(0 0 3px rgba(255,90,25,.98))
    drop-shadow(0 0 7px rgba(145,0,205,.72))!important;
  animation:fearHellPortalEmbers 1.65s ease-in-out infinite alternate!important;
}

@keyframes fearHellPortalText{
  0%{background-position:0% 0}
  100%{background-position:-360% 0}
}
@keyframes fearHellPortalSpin{
  0%{transform:translateY(-50%) rotate(0deg) scaleX(1.02);filter:drop-shadow(0 0 3px rgba(255,220,100,.9)) drop-shadow(0 0 7px rgba(255,55,12,.9)) drop-shadow(0 0 13px rgba(145,0,195,.75))}
  50%{transform:translateY(-50%) rotate(180deg) scaleX(1.08);filter:drop-shadow(0 0 5px rgba(255,240,150,1)) drop-shadow(0 0 12px rgba(255,55,12,1)) drop-shadow(0 0 20px rgba(155,0,220,.95))}
  100%{transform:translateY(-50%) rotate(360deg) scaleX(1.02);filter:drop-shadow(0 0 3px rgba(255,220,100,.9)) drop-shadow(0 0 7px rgba(255,55,12,.9)) drop-shadow(0 0 13px rgba(145,0,195,.75))}
}
@keyframes fearHellPortalEmbers{
  0%{transform:translate3d(0,3px,0) scale(.92);opacity:.52}
  35%{transform:translate3d(-1px,-1px,0) scale(1.03);opacity:.98}
  70%{transform:translate3d(1px,-4px,0) scale(.97);opacity:.72}
  100%{transform:translate3d(0,-7px,0) scale(1.08);opacity:1}
}
@keyframes fearHellPortalFlicker{
  0%,16%,22%,52%,58%,82%,100%{filter:brightness(1.02) saturate(1.2)}
  18%{filter:brightness(1.6) saturate(1.65)}
  54%{filter:brightness(.82) saturate(1.45)}
  84%{filter:brightness(1.38) saturate(1.8)}
}

/* Keep the portal compact in shoutbox / mobile placements. */
@media(max-width:640px){
  .uname.uname-fx-hellportal{padding:.08em .22em .13em!important}
  .uname.uname-fx-hellportal::before{left:-.42em!important;right:-.42em!important;height:1.72em!important}
  .uname.uname-fx-hellportal::after{left:-.28em!important;right:-.28em!important;top:-.36em!important;bottom:-.36em!important}
}