/* __KIKI_THEME_LIGHTNING_V6__ */
/* Theme on restyles 5 title heroes. Latest / android-online / android-single stay original.
   /pc-games corona: ProfileCard tilt + ice foil, no profile UI. */

html.kiki-theme-lightning [data-lt-state]{
  --lt-accent:#7dd3fc;
  --lt-flash:#e8f4ff;
  --lt-line:rgba(125,211,252,.34);
  --lt-radius:16px;
  position:relative!important;
  overflow:hidden!important;
  border-radius:var(--lt-radius)!important;
}

html.kiki-theme-lightning [data-lt-state=sheet]{
  text-align:center;
  padding:48px 32px;
  background:linear-gradient(180deg,#f4faff 0%,#eef6fb 62%,#e8f4ff 100%);
}

html.kiki-theme-lightning [data-lt-state] h1,
html.kiki-theme-lightning [data-lt-state] p,
html.kiki-theme-lightning [data-lt-state] .hero__content,
html.kiki-theme-lightning [data-lt-state] .hero__main,
html.kiki-theme-lightning [data-lt-state] .hero__stats,
html.kiki-theme-lightning [data-lt-state] .hero__badge,
html.kiki-theme-lightning [data-lt-state] .hero__copy,
html.kiki-theme-lightning [data-lt-state] .hero__aside{
  position:relative;
  z-index:2;
}

.kiki-lt-fx{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  border-radius:inherit;
}

.kiki-lt-rays,
.kiki-lt-glare,
.kiki-lt-flash,
.kiki-lt-eb,
.kiki-pc-behind,
.kiki-pc-inside,
.kiki-pc-shine,
.kiki-pc-glare{
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
}

.kiki-lt-eb{
  width:100%;
  height:100%;
  display:block;
}

.kiki-lt-rays{
  z-index:0;
  overflow:hidden;
}

.kiki-lt-ray{
  position:absolute;
  top:-12%;
  left:var(--ray-x,50%);
  width:var(--ray-w,14%);
  height:130%;
  transform:translateX(-50%) rotate(var(--ray-rot,0deg));
  transform-origin:50% 0;
  background:linear-gradient(180deg,rgba(125,211,252,var(--ray-a,.28)) 0%,rgba(125,211,252,.06) 42%,transparent 78%);
  filter:blur(var(--ray-blur,10px));
  opacity:.9;
}

html.kiki-theme-lightning [data-lt-state=leader] .kiki-lt-ray{
  animation:9s ease-in-out infinite kiki-lt-ray-drift;
}
html.kiki-theme-lightning [data-lt-state=fork] .kiki-lt-ray{
  opacity:.55;
  animation:11s ease-in-out infinite kiki-lt-ray-drift;
}
html.kiki-theme-lightning [data-lt-state=sheet] .kiki-lt-ray{
  animation:14s ease-in-out infinite kiki-lt-ray-breathe;
}

html.kiki-theme-lightning [data-lt-state=return]{
  /* __KIKI_HOT_RANK_UI_V2__ */
  --lt-radius:20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 18px 40px rgba(14,116,144,.12)!important;
}
html.kiki-theme-lightning [data-lt-state=leader]{
  box-shadow:0 0 0 1px rgba(125,211,252,.28)!important;
}
html.kiki-theme-lightning [data-lt-state=fork]{
  box-shadow:0 0 0 1px rgba(125,211,252,.14)!important;
}
html.kiki-theme-lightning [data-lt-state=sheet]{
  box-shadow:none!important;
}

html.kiki-theme-lightning [data-lt-state=return] h1{
  background-image:linear-gradient(105deg,#0f172a 0%,#0f172a 38%,#7dd3fc 50%,#0f172a 62%,#0f172a 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  animation:7.5s linear infinite kiki-lt-shiny;
}

html.kiki-theme-lightning [data-lt-state=leader] .hero__wave{
  background:linear-gradient(90deg,transparent,#7dd3fc,transparent)!important;
}

html.kiki-theme-lightning [data-lt-state=fork] .hero__rings span{
  border-color:rgba(125,211,252,.42)!important;
  box-shadow:0 0 18px rgba(125,211,252,.1);
}

html.kiki-theme-lightning [data-lt-state=corona]{
  --lt-radius:24px;
  --pointer-x:50%;
  --pointer-y:50%;
  --pointer-from-center:0;
  --pointer-from-top:.5;
  --pointer-from-left:.5;
  --rotate-x:0deg;
  --rotate-y:0deg;
  --background-x:50%;
  --background-y:50%;
  --card-opacity:0;
  --behind-glow-color:rgba(125,211,252,.42);
  --behind-glow-size:46%;
  --inner-gradient:linear-gradient(145deg,#0b1b338c 0%,#71C4FF44 100%);
  --sunpillar-1:hsl(190,72%,78%);
  --sunpillar-2:hsl(200,80%,80%);
  --sunpillar-3:hsl(188,64%,74%);
  --sunpillar-4:hsl(206,70%,82%);
  --sunpillar-5:hsl(196,76%,76%);
  --sunpillar-6:hsl(184,68%,74%);
  overflow:hidden!important;
  transform:perspective(560px) rotateX(var(--rotate-y)) rotateY(var(--rotate-x));
  transform-style:preserve-3d;
  transition:transform 1s ease;
  box-shadow:
    0 0 0 1px rgba(125,211,252,.2),
    rgba(15,23,42,.32) calc(var(--pointer-from-left) * 1px - .3px) calc(var(--pointer-from-top) * 2px - .6px) 22px -4px!important;
}
html.kiki-theme-lightning [data-lt-state=corona].kiki-pc-active,
html.kiki-theme-lightning [data-lt-state=corona]:hover{
  --card-opacity:1;
  transition:none;
}
html.kiki-theme-lightning [data-lt-state=corona].kiki-pc-entering{
  transition:transform 180ms ease-out;
}
html.kiki-theme-lightning [data-lt-state=corona] .hero__grid{
  background-image:repeating-linear-gradient(0deg,rgba(125,211,252,.14) 0 1px,transparent 1px 32px),repeating-linear-gradient(90deg,rgba(125,211,252,.14) 0 1px,transparent 1px 32px)!important;
}
html.kiki-theme-lightning [data-lt-state=corona] .hero__main,
html.kiki-theme-lightning [data-lt-state=corona] .hero__stats{
  transform:translate3d(calc(var(--pointer-from-left) * -.6px + .3px),calc(var(--pointer-from-top) * -.6px + .3px),.1px);
}

.kiki-pc-behind{
  z-index:0;
  background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),var(--behind-glow-color) 0%,transparent var(--behind-glow-size));
  filter:blur(42px) saturate(1.05);
  opacity:calc(.55 * var(--card-opacity));
  transition:opacity 200ms ease;
}
.kiki-pc-inside{
  z-index:1;
  background-image:var(--inner-gradient);
  background-color:transparent;
}
.kiki-pc-shine{
  z-index:3;
  overflow:hidden;
  mix-blend-mode:color-dodge;
  filter:brightness(.66) contrast(1.28) saturate(.42) opacity(.42);
  animation:18s linear infinite kiki-pc-holo;
  background-image:
    repeating-linear-gradient(
      0deg,
      var(--sunpillar-1) 5%,
      var(--sunpillar-2) 10%,
      var(--sunpillar-3) 15%,
      var(--sunpillar-4) 20%,
      var(--sunpillar-5) 25%,
      var(--sunpillar-6) 30%,
      var(--sunpillar-1) 35%
    ),
    repeating-linear-gradient(
      -45deg,
      #0e152e 0%,
      hsl(190,10%,62%) 3.8%,
      hsl(190,24%,68%) 4.5%,
      hsl(190,10%,62%) 5.2%,
      #0e152e 10%,
      #0e152e 12%
    ),
    radial-gradient(
      farthest-corner circle at var(--pointer-x) var(--pointer-y),
      hsla(0,0%,0%,.08) 12%,
      hsla(0,0%,0%,.14) 20%,
      hsla(0,0%,0%,.22) 120%
    );
  background-position:0 var(--background-y),var(--background-x) var(--background-y),center;
  background-blend-mode:color,hard-light;
  background-size:500% 500%,300% 300%,200% 200%;
  background-repeat:repeat;
}
.kiki-pc-shine::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .8s ease;
  background-image:
    linear-gradient(45deg,var(--sunpillar-4),var(--sunpillar-5),var(--sunpillar-6),var(--sunpillar-1),var(--sunpillar-2),var(--sunpillar-3)),
    radial-gradient(circle at var(--pointer-x) var(--pointer-y),hsl(0,0%,72%) 0%,hsla(200,30%,40%,.2) 90%);
  background-size:250% 250%,100% 100%;
  background-position:var(--pointer-x) var(--pointer-y),center;
  background-blend-mode:color-dodge;
  mix-blend-mode:luminosity;
  filter:brightness(calc(1.4 - var(--pointer-from-center) * .25)) contrast(calc(1.2 + var(--pointer-from-center) * .4));
}
html.kiki-theme-lightning [data-lt-state=corona].kiki-pc-active .kiki-pc-shine,
html.kiki-theme-lightning [data-lt-state=corona]:hover .kiki-pc-shine{
  filter:brightness(.82) contrast(1.42) saturate(.5) opacity(.58);
  animation-play-state:paused;
}
html.kiki-theme-lightning [data-lt-state=corona].kiki-pc-active .kiki-pc-shine::before,
html.kiki-theme-lightning [data-lt-state=corona]:hover .kiki-pc-shine::before{
  opacity:.62;
}
.kiki-pc-glare{
  z-index:4;
  background-image:radial-gradient(
    farthest-corner circle at var(--pointer-x) var(--pointer-y),
    hsla(200,36%,88%,.42) 12%,
    hsla(200,40%,32%,.28) 58%,
    transparent 86%
  );
  mix-blend-mode:overlay;
  filter:brightness(.85) contrast(1.15);
  opacity:.55;
}

.kiki-lt-flash{
  z-index:4;
  background:linear-gradient(180deg,rgba(232,244,255,0) 0,rgba(232,244,255,.55) 48%,rgba(232,244,255,0) 100%);
  opacity:0;
}
html.kiki-theme-lightning .kiki-lt-struck .kiki-lt-flash{
  animation:.16s ease-out forwards kiki-lt-strike;
}

html.kiki-theme-lightning[data-vp=phone] .kiki-lt-eb,
html.kiki-theme-lightning[data-vp=phone] .kiki-lt-glare{
  display:none!important;
}
html.kiki-theme-lightning[data-vp=phone] [data-lt-state=corona]{
  transform:none!important;
  transition:none!important;
}
html.kiki-theme-lightning[data-vp=phone] [data-lt-state=corona] .hero__main,
html.kiki-theme-lightning[data-vp=phone] [data-lt-state=corona] .hero__stats{
  transform:none!important;
}
html.kiki-theme-lightning[data-vp=phone] .kiki-pc-shine{
  animation:none!important;
  filter:brightness(.7) contrast(1.2) saturate(.38) opacity(.28);
}
html.kiki-theme-lightning[data-vp=phone] .kiki-pc-shine::before,
html.kiki-theme-lightning[data-vp=phone] .kiki-pc-behind{
  opacity:0!important;
}
html.kiki-theme-lightning[data-vp=phone] [data-lt-state=return]{
  box-shadow:0 0 0 1px rgba(125,211,252,.5),0 6px 18px rgba(125,211,252,.12)!important;
}
html.kiki-theme-lightning[data-vp=phone] [data-lt-state=leader]{
  box-shadow:0 0 0 1px rgba(125,211,252,.26)!important;
}
html.kiki-theme-lightning[data-vp=phone] .kiki-lt-ray{
  animation:none!important;
}

@keyframes kiki-lt-shiny{
  0%{background-position:120% 0}
  100%{background-position:-120% 0}
}
@keyframes kiki-lt-strike{
  0%,100%{opacity:0}
  18%{opacity:.72}
}
@keyframes kiki-lt-ray-drift{
  0%,100%{transform:translateX(-50%) rotate(var(--ray-rot,0deg)) translateY(0)}
  50%{transform:translateX(-50%) rotate(var(--ray-rot,0deg)) translateY(3%)}
}
@keyframes kiki-lt-ray-breathe{
  0%,100%{opacity:.55}
  50%{opacity:.9}
}
@keyframes kiki-pc-holo{
  0%{background-position:0 var(--background-y),0 0,center}
  100%{background-position:0 var(--background-y),90% 90%,center}
}
@media (prefers-reduced-motion:reduce){
  html.kiki-theme-lightning [data-lt-state] h1,
  html.kiki-theme-lightning .kiki-lt-ray,
  html.kiki-theme-lightning .kiki-lt-glare,
  html.kiki-theme-lightning .kiki-pc-shine,
  html.kiki-theme-lightning .kiki-lt-struck .kiki-lt-flash{
    animation:none!important;
    transition:none!important;
  }
  html.kiki-theme-lightning [data-lt-state=corona]{
    transform:none!important;
    transition:none!important;
  }
  html.kiki-theme-lightning [data-lt-state=corona] .hero__main,
  html.kiki-theme-lightning [data-lt-state=corona] .hero__stats{
    transform:none!important;
  }
  html.kiki-theme-lightning .kiki-pc-shine::before,
  html.kiki-theme-lightning .kiki-pc-behind{
    opacity:0!important;
  }
  html.kiki-theme-lightning [data-lt-state=return] h1{
    background:none;
    -webkit-background-clip:unset;
    background-clip:unset;
    color:inherit!important;
  }
  html.kiki-theme-lightning .kiki-lt-eb,
  html.kiki-theme-lightning .kiki-lt-glare{
    display:none!important;
  }
  html.kiki-theme-lightning .kiki-lt-flash{
    opacity:0!important;
  }
}
