.super-nice-fx {
  position: fixed;
  z-index: 100000;
  inset: 0;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 50% 48%, rgba(136, 64, 195, .24), transparent 34%),
    rgba(4, 1, 13, .94);
  opacity: 0;
  isolation: isolate;
  animation: super-nice-fx-in .18s ease-out forwards;
}

.super-nice-fx.is-leaving {
  pointer-events: none;
  animation: super-nice-fx-out .55s ease-in forwards;
}

.super-nice-fx--bakuretsu {
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 70, 0, .34), transparent 38%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 140, 0, .045) 0 5deg, transparent 5deg 10deg),
    rgba(8, 0, 0, .96);
}

.super-nice-fx--rush {
  background:
    radial-gradient(ellipse at 50% 52%, rgba(37, 10, 64, .46), transparent 40%),
    linear-gradient(145deg, #030007, #090314 48%, #010104);
}

.super-nice-fx--divine {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 250, 195, .32), transparent 38%),
    linear-gradient(to bottom, #1d102a, #08030d);
}

.super-nice-fx--rush .super-nice-fx__canvas {
  animation: super-nice-fx-rush-shake 1.72s steps(2, end);
}

.super-nice-fx__canvas,
.super-nice-fx__vignette,
.super-nice-fx__flash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.super-nice-fx__canvas {
  display: block;
}

.super-nice-fx__vignette {
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .13) 49%, transparent 52%),
    radial-gradient(circle, transparent 35%, rgba(0, 0, 0, .7) 100%);
  mix-blend-mode: screen;
  animation: super-nice-fx-shine 1.35s linear infinite;
}

.super-nice-fx__flash {
  pointer-events: none;
  opacity: 0;
  background: #fff7cd;
  animation: super-nice-fx-flash .85s .62s ease-out both;
}

.super-nice-fx__content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92vw;
  max-width: 800px;
  text-align: center;
  transform: translate(-50%, -50%) scale(.15) rotate(-5deg);
  opacity: 0;
  filter: blur(14px);
  animation: super-nice-fx-reveal .7s .72s cubic-bezier(.16, 1.45, .36, 1) forwards;
}

.super-nice-fx__eyebrow {
  margin-bottom: 8px;
  color: #fff6b7;
  font: 800 clamp(12px, 2vw, 20px)/1 sans-serif;
  letter-spacing: .38em;
  text-shadow: 0 0 13px #ffb300;
}

.super-nice-fx__title {
  position: relative;
  margin: 0;
  color: #fff;
  font: 900 clamp(52px, 10vw, 126px)/.95 "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: -.06em;
  -webkit-text-stroke: clamp(2px, .35vw, 5px) #c98c17;
  text-shadow:
    0 4px 0 #7a3900,
    0 8px 0 #4f2100,
    0 0 12px #fff,
    0 0 28px #ffd32a,
    0 0 65px #ff6a00;
  animation: super-nice-fx-title-pulse .7s 1.45s ease-in-out 3;
}

.super-nice-fx__gold-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68vw;
  max-width: 520px;
  aspect-ratio: 1;
  border: 4px double rgba(255, 239, 128, .85);
  border-radius: 50%;
  box-shadow:
    0 0 20px #fff,
    0 0 60px #ffc400,
    inset 0 0 45px rgba(255, 190, 0, .55);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.1) rotate(-140deg);
  animation: super-nice-fx-gold-seal 1.4s .75s cubic-bezier(.14, 1.22, .3, 1) forwards,
    super-nice-fx-gold-spin 8s 2.15s linear infinite;
}

.super-nice-fx__gold-seal::before,
.super-nice-fx__gold-seal::after {
  content: "";
  position: absolute;
  inset: 8%;
  border: 2px dashed rgba(255, 249, 190, .82);
  border-radius: 50%;
}

.super-nice-fx__gold-seal::after {
  inset: 21%;
  border-style: solid;
  box-shadow: 0 0 26px #fff3a0;
}

.super-nice-fx__gold-final {
  display: inline-block;
  margin-top: 18px;
  padding: 7px 18px;
  border: 1px solid #fff6ad;
  color: #fff8c6;
  font: 900 clamp(12px, 2vw, 18px)/1 sans-serif;
  letter-spacing: .3em;
  text-shadow: 0 0 10px #ff9d00;
  opacity: 0;
  transform: scale(2.2);
  animation: super-nice-fx-gold-final .55s 4.35s cubic-bezier(.16, 1.45, .3, 1) forwards;
}

.super-nice-fx__point {
  display: inline-block;
  min-width: 150px;
  margin-top: clamp(20px, 4vh, 38px);
  padding: 11px 28px 10px;
  border: 2px solid #fff3a2;
  border-radius: 999px;
  color: #341100;
  background: linear-gradient(100deg, #d49a19, #fff5a6 35%, #ffc92f 65%, #fff9ca);
  box-shadow: 0 0 8px #fff, 0 0 30px #ffb300, inset 0 1px 3px #fff;
  font: 900 clamp(20px, 4vw, 34px)/1.15 sans-serif;
  letter-spacing: .08em;
  transform: translateY(20px);
  opacity: 0;
  animation: super-nice-fx-point-in .45s 1.28s cubic-bezier(.2, 1.55, .4, 1) forwards;
}

.super-nice-fx__message {
  margin-top: clamp(20px, 4vh, 36px);
  color: #fff;
  font: 700 clamp(14px, 2.2vw, 20px)/1.6 sans-serif;
  letter-spacing: .12em;
  text-shadow: 0 0 10px #9d54ff;
  opacity: 0;
  animation: super-nice-fx-message-in .5s 1.7s ease-out forwards;
}

.super-nice-fx__impact-word {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 7vw, 110px);
  min-height: clamp(110px, 20vw, 230px);
  white-space: nowrap;
}

.super-nice-fx__impact-word span {
  display: inline-block;
  color: #fff;
  font: 1000 clamp(90px, 18vw, 220px)/.8 "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  letter-spacing: -.04em;
  -webkit-text-stroke: clamp(3px, .55vw, 8px) #230000;
  text-shadow:
    0 7px 0 #8d0000,
    0 13px 0 #360000,
    0 0 12px #fff,
    0 0 30px #ffdc00,
    0 0 70px #ff2900;
  opacity: 0;
  transform: scale(4.5) rotate(-18deg);
  filter: blur(10px);
  animation: super-nice-fx-letter-hit .72s cubic-bezier(.1, 1.5, .3, 1) forwards;
}

.super-nice-fx__impact-word span:nth-child(2) {
  color: #fff1a1;
  transform: scale(4.5) rotate(14deg);
}

.super-nice-fx__impact-word span:nth-child(3) {
  color: #ffdc27;
  font-size: clamp(72px, 15vw, 180px);
}

.super-nice-fx__bakuretsu-title {
  margin-top: clamp(8px, 2vh, 20px);
  color: #fff8b0;
  font: 1000 clamp(38px, 8vw, 96px)/1 "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-style: italic;
  letter-spacing: -.06em;
  -webkit-text-stroke: clamp(2px, .35vw, 5px) #bd1800;
  text-shadow:
    0 5px 0 #5d0000,
    0 0 10px #fff,
    0 0 35px #ffb000,
    0 0 70px #ff2600;
  opacity: 0;
  transform: scale(.15) skewX(-12deg);
  animation: super-nice-fx-bakuretsu-title .7s 4.55s cubic-bezier(.1, 1.45, .25, 1) forwards,
    super-nice-fx-title-pulse .72s 5.35s ease-in-out 3;
}

.super-nice-fx--bakuretsu .super-nice-fx__content {
  animation: none;
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%);
}

.super-nice-fx--bakuretsu .super-nice-fx__point {
  animation-delay: 5.55s;
  border-color: #fff;
  background: linear-gradient(100deg, #ff3100, #ffdf2c 34%, #fff6b0 52%, #ff7500);
  box-shadow: 0 0 8px #fff, 0 0 38px #ff3100, inset 0 1px 3px #fff;
}

.super-nice-fx--bakuretsu .super-nice-fx__message {
  animation-delay: 6.15s;
  text-shadow: 0 0 12px #ff3c00;
}

.super-nice-fx--bakuretsu .super-nice-fx__flash {
  animation: super-nice-fx-bakuretsu-flash 2.55s .1s linear both;
}

.super-nice-fx__rush-visual {
  position: fixed;
  inset: 0;
  display: block;
  opacity: 0;
  background: #030006;
  transform: scale(1.18);
  animation: super-nice-fx-rush-visual 2.1s 3.05s cubic-bezier(.12, .88, .22, 1) forwards;
}

.super-nice-fx__rush-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(1, 0, 5, .12), transparent 48%, rgba(2, 0, 8, .78)),
    radial-gradient(circle, transparent 32%, rgba(0, 0, 0, .6));
}

.super-nice-fx__rush-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.16) saturate(.7);
}

.super-nice-fx__rush-title {
  position: absolute;
  right: 4vw;
  bottom: 28vh;
  left: 4vw;
  z-index: 1;
  margin: 0;
  color: #fff;
  font: 1000 clamp(44px, 9vw, 110px)/.95 "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-style: italic;
  letter-spacing: -.07em;
  -webkit-text-stroke: clamp(2px, .4vw, 6px) #16001f;
  text-shadow:
    5px 5px 0 #8f1db4,
    9px 9px 0 #25002f,
    0 0 12px #fff,
    0 0 35px #52eaff;
  opacity: 0;
  transform: translateX(-55vw) skewX(-14deg);
  animation: super-nice-fx-rush-title .62s 5.35s cubic-bezier(.12, 1.25, .3, 1) forwards,
    super-nice-fx-title-pulse .7s 6.12s ease-in-out 2;
}

.super-nice-fx--rush .super-nice-fx__content {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: none;
  opacity: 1;
  filter: none;
  transform: none;
}

.super-nice-fx--rush .super-nice-fx__point {
  position: absolute;
  bottom: 18vh;
  left: 50%;
  z-index: 3;
  margin: 0;
  transform: translate(-50%, 20px);
  animation-name: super-nice-fx-rush-point-in;
  animation-delay: 6.25s;
  background: linear-gradient(100deg, #59206c, #d7fbff 38%, #67eaff 58%, #f25dff);
  box-shadow: 0 0 8px #fff, 0 0 32px #41eaff, 0 0 60px #b82eff;
}

.super-nice-fx--rush .super-nice-fx__message {
  position: absolute;
  right: 4vw;
  bottom: 10vh;
  left: 4vw;
  z-index: 3;
  margin: 0;
  animation-delay: 6.82s;
  text-shadow: 0 0 12px #4deaff, 0 0 22px #c430ff;
}

.super-nice-fx--rush .super-nice-fx__flash {
  background: #e8fbff;
  animation: super-nice-fx-rush-flash 3.35s .12s steps(1, end) both;
}

.super-nice-fx__magic-circles {
  position: fixed;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.super-nice-fx__magic-circles img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88vw;
  max-width: 760px;
  max-height: 88vh;
  object-fit: contain;
  opacity: 0;
  mix-blend-mode: screen;
  filter: brightness(1.3) contrast(1.08) drop-shadow(0 0 24px #ffe287);
}

.super-nice-fx__magic-circles .is-circle-1 {
  animation: super-nice-fx-magic-circle-clockwise 2.5s .12s cubic-bezier(.12, .82, .22, 1) both;
}

.super-nice-fx__magic-circles .is-circle-2 {
  width: 74vw;
  max-width: 620px;
  animation: super-nice-fx-magic-circle-counter 2.35s .65s cubic-bezier(.12, .82, .22, 1) both;
}

.super-nice-fx__magic-circles .is-circle-3 {
  width: 64vw;
  max-width: 530px;
  animation: super-nice-fx-magic-circle-clockwise 2.1s 1.15s cubic-bezier(.12, .82, .22, 1) both;
}

.super-nice-fx__magic-circles .is-circle-4 {
  width: 180vmax;
  max-width: none;
  max-height: none;
  filter: grayscale(1) brightness(3.2) contrast(1.18) drop-shadow(0 0 45px #fff);
  animation: super-nice-fx-magic-burst 1.45s 2.12s cubic-bezier(.08, .88, .18, 1) both;
}

.super-nice-fx__magic-title-image {
  position: absolute;
  right: 5vw;
  bottom: 27vh;
  left: 5vw;
  z-index: 3;
  width: 96vw;
  max-width: 1120px;
  max-height: 36vh;
  margin: auto;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 0 14px #fff) drop-shadow(0 0 34px #ffd85a);
  transform: scale(.12);
  animation: super-nice-fx-magic-title .82s 5.25s cubic-bezier(.08, 1.38, .22, 1) forwards;
}

.super-nice-fx__magic-clouds {
  position: fixed;
  z-index: 1;
  right: -28vw;
  left: -28vw;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 8% 60%, rgba(255, 255, 255, .72) 0 7%, transparent 18%),
    radial-gradient(ellipse at 25% 45%, rgba(230, 244, 255, .62) 0 9%, transparent 21%),
    radial-gradient(ellipse at 45% 68%, rgba(255, 255, 255, .66) 0 8%, transparent 20%),
    radial-gradient(ellipse at 66% 42%, rgba(235, 246, 255, .58) 0 10%, transparent 23%),
    radial-gradient(ellipse at 87% 64%, rgba(255, 255, 255, .68) 0 8%, transparent 20%);
  background-size: 110% 100%;
  filter: blur(18px);
  mix-blend-mode: screen;
}

.super-nice-fx__magic-clouds--back {
  top: 34vh;
  height: 35vh;
  transform: translateX(-12%);
  animation: super-nice-fx-clouds-back 5.8s 3.25s ease-out forwards;
}

.super-nice-fx__magic-clouds--front {
  bottom: -6vh;
  height: 46vh;
  z-index: 2;
  filter: blur(24px);
  transform: translateX(12%) scale(1.12);
  animation: super-nice-fx-clouds-front 5.8s 3.45s ease-out forwards;
}

.super-nice-fx--bakuretsu .super-nice-fx__content {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: none;
  opacity: 1;
  filter: none;
  transform: none;
}

.super-nice-fx__bakuretsu-glyphs {
  position: absolute;
  top: 8vh;
  right: 2vw;
  left: 2vw;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(4px, 2vw, 34px);
  height: 42vh;
}

.super-nice-fx__bakuretsu-glyphs img {
  width: 29vw;
  max-width: 380px;
  max-height: 42vh;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 34px #ff3100);
  transform: translateY(-120vh) scale(1.8) rotate(-7deg);
  animation: super-nice-fx-glyph-drop .48s cubic-bezier(.12, 1.55, .22, 1) forwards;
}

.super-nice-fx__bakuretsu-glyphs .is-baku {
  animation-delay: .25s;
}

.super-nice-fx__bakuretsu-glyphs .is-retsu {
  animation-delay: .68s;
}

.super-nice-fx__bakuretsu-glyphs .is-bang {
  animation-delay: 1.08s;
}

.super-nice-fx__bakuretsu-title-image {
  position: absolute;
  top: 49vh;
  right: 5vw;
  left: 5vw;
  z-index: 2;
  width: 90vw;
  max-width: 980px;
  max-height: 24vh;
  margin: auto;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 0 16px #fff) drop-shadow(0 0 38px #ff3c00);
  transform: translateY(-100vh) scale(1.7);
  animation: super-nice-fx-title-drop .55s 1.52s cubic-bezier(.1, 1.5, .2, 1) forwards;
}

.super-nice-fx__bakuretsu-blasts {
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.super-nice-fx__bakuretsu-blasts img {
  position: absolute;
  top: var(--blast-y);
  left: var(--blast-x);
  width: var(--blast-size);
  max-width: 78vw;
  height: auto;
  opacity: 0;
  mix-blend-mode: screen;
  filter: brightness(1.25) contrast(1.08) drop-shadow(0 0 22px #ff5a00);
  transform: translate(-50%, -50%) rotate(var(--blast-rotation)) scale(.05);
  animation: super-nice-fx-random-blast .52s var(--blast-delay) cubic-bezier(.08, .9, .16, 1) both;
}

.super-nice-fx__bakuretsu-blasts .super-nice-fx__bakuretsu-final-blast {
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 200vmax;
  max-width: none;
  opacity: 0;
  filter: brightness(1.7) saturate(1.2) contrast(1.08)
    drop-shadow(0 0 5vmax #ff5a00);
  transform: translate(-50%, -50%) rotate(-8deg) scale(.02);
  animation: super-nice-fx-final-blast 1.75s 4.05s cubic-bezier(.08, .82, .15, 1) both;
}

.super-nice-fx--bakuretsu .super-nice-fx__point {
  position: absolute;
  bottom: 18vh;
  left: 50%;
  z-index: 3;
  margin: 0;
  transform: translate(-50%, 20px);
  animation-name: super-nice-fx-rush-point-in;
  animation-delay: 2.75s;
}

.super-nice-fx--bakuretsu .super-nice-fx__message {
  position: absolute;
  right: 4vw;
  bottom: 10vh;
  left: 4vw;
  z-index: 3;
  margin: 0;
  animation-delay: 3.3s;
}

.super-nice-fx--divine .super-nice-fx__content {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: none;
  opacity: 1;
  filter: none;
  transform: none;
}

.super-nice-fx__divine-stage {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}

.super-nice-fx__divine-world {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  opacity: .18;
  transform: scale(1.16);
  filter: blur(16px) brightness(.32) saturate(.65);
  animation: super-nice-fx-divine-world 3.4s 1.05s cubic-bezier(.12, .9, .22, 1) forwards;
}

.super-nice-fx__divine-world::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(3, 6, 20, .1), transparent 52%, rgba(10, 4, 20, .58)),
    radial-gradient(circle at 50% 47%, transparent 24%, rgba(0, 0, 0, .28));
}

.super-nice-fx__divine-world img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.super-nice-fx__curtain {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 54%;
  background:
    linear-gradient(to bottom, rgba(255, 224, 108, .9) 0 13px, #681019 13px 28px, transparent 28px),
    repeating-linear-gradient(90deg, #33030b 0 5%, #9d1a27 10%, #4b0710 17%, #b72b37 23%, #39040c 29%);
  box-shadow: inset 0 0 45px rgba(0, 0, 0, .72), 0 0 28px rgba(0, 0, 0, .9);
}

.super-nice-fx__curtain::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 18px;
  background: repeating-linear-gradient(90deg, #b78624 0 8px, #fff1a0 8px 13px, #8b5e0f 13px 20px);
  box-shadow: 0 -5px 16px rgba(255, 210, 73, .45);
}

.super-nice-fx__curtain--left {
  left: 0;
  transform-origin: left center;
  animation: super-nice-fx-curtain-left 2.2s .48s cubic-bezier(.65, 0, .25, 1) forwards;
}

.super-nice-fx__curtain--right {
  right: 0;
  transform-origin: right center;
  animation: super-nice-fx-curtain-right 2.2s .48s cubic-bezier(.65, 0, .25, 1) forwards;
}

.super-nice-fx__divine-light {
  position: absolute;
  z-index: 1;
  top: -18%;
  left: 50%;
  width: 86vw;
  max-width: 900px;
  height: 125%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .98), rgba(255, 246, 174, .62) 40%, transparent 88%);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
  opacity: 0;
  filter: blur(15px);
  transform: translateX(-50%) scaleX(.05);
  animation: super-nice-fx-divine-light 2.2s 1.3s ease-out forwards;
}

.super-nice-fx__divine-halo {
  position: absolute;
  z-index: 2;
  top: 42%;
  left: 50%;
  width: 70vw;
  max-width: 560px;
  aspect-ratio: 1;
  border: 4px solid rgba(255, 250, 201, .92);
  border-radius: 50%;
  box-shadow:
    0 0 12px #fff,
    0 0 45px #fff2a2,
    0 0 110px rgba(255, 219, 100, .9),
    inset 0 0 60px rgba(255, 255, 255, .38);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.15);
  animation: super-nice-fx-divine-halo 1.3s 2.3s cubic-bezier(.16, 1.25, .3, 1) forwards,
    super-nice-fx-gold-spin 12s 3.6s linear infinite;
}

.super-nice-fx__divine-kicker,
.super-nice-fx__divine-final {
  position: absolute;
  right: 4vw;
  left: 4vw;
  z-index: 1;
  color: #fffbd4;
  font: 900 clamp(11px, 2vw, 19px)/1 sans-serif;
  letter-spacing: .36em;
  text-shadow: 0 0 12px #fff, 0 0 28px #ffc928;
  opacity: 0;
}

.super-nice-fx__divine-kicker {
  top: 27vh;
  animation: super-nice-fx-message-in .6s 2.7s ease-out forwards;
}

.super-nice-fx__divine-title {
  position: absolute;
  top: 36vh;
  right: 3vw;
  left: 3vw;
  z-index: 1;
  color: #fff;
  font: 1000 clamp(48px, 10vw, 124px)/.95 "Hiragino Mincho ProN", "Yu Mincho", serif;
  letter-spacing: -.04em;
  -webkit-text-stroke: clamp(2px, .35vw, 5px) #c28a15;
  text-shadow:
    0 4px 0 #6f3e00,
    0 0 10px #fff,
    0 0 35px #fff2a6,
    0 0 90px #ffc83d;
  opacity: 0;
  transform: scale(.2);
  animation: super-nice-fx-divine-title 1s 3.25s cubic-bezier(.12, 1.38, .3, 1) forwards,
    super-nice-fx-title-pulse 1.1s 4.45s ease-in-out 2;
}

.super-nice-fx--divine .super-nice-fx__point {
  position: absolute;
  bottom: 24vh;
  left: 50%;
  z-index: 1;
  margin: 0;
  transform: translate(-50%, 20px);
  animation-name: super-nice-fx-rush-point-in;
  animation-delay: 4.65s;
}

.super-nice-fx--divine .super-nice-fx__message {
  position: absolute;
  right: 4vw;
  bottom: 16vh;
  left: 4vw;
  z-index: 1;
  margin: 0;
  animation-delay: 5.25s;
  text-shadow: 0 0 12px #fff, 0 0 25px #ffc928;
}

.super-nice-fx__divine-final {
  bottom: 9vh;
  animation: super-nice-fx-divine-final .75s 6.25s cubic-bezier(.12, 1.35, .3, 1) forwards;
}

.super-nice-fx--divine .super-nice-fx__flash {
  background: #fffdf0;
  animation: super-nice-fx-divine-flash 2.8s 1.2s ease-out both;
}

.super-nice-fx__skip {
  position: absolute;
  right: 16px;
  right: calc(16px + env(safe-area-inset-right));
  bottom: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 2;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 999px;
  color: rgba(255, 255, 255, .85);
  background: rgba(0, 0, 0, .3);
  font-size: 12px;
  cursor: pointer;
}

.super-nice-fx__skip:hover {
  color: #2d1600;
  background: #fff5b0;
}

@keyframes super-nice-fx-in {
  to { opacity: 1; }
}

@keyframes super-nice-fx-out {
  to { opacity: 0; }
}

@keyframes super-nice-fx-shine {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes super-nice-fx-flash {
  0%, 100% { opacity: 0; }
  12% { opacity: .95; }
  34% { opacity: .12; }
  48% { opacity: .7; }
}

@keyframes super-nice-fx-reveal {
  0% {
    opacity: 0;
    filter: blur(14px);
    transform: translate(-50%, -50%) scale(.15) rotate(-5deg);
  }
  65% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1.13) rotate(1deg);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
}

@keyframes super-nice-fx-title-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}

@keyframes super-nice-fx-point-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes super-nice-fx-rush-point-in {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes super-nice-fx-message-in {
  to { opacity: 1; }
}

@keyframes super-nice-fx-gold-seal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.1) rotate(-140deg);
  }
  70% {
    opacity: .88;
    transform: translate(-50%, -50%) scale(1.12) rotate(12deg);
  }
  100% {
    opacity: .65;
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
}

@keyframes super-nice-fx-gold-spin {
  from { transform: translate(-50%, -50%) rotate(0); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes super-nice-fx-gold-final {
  0% {
    opacity: 0;
    transform: scale(2.2);
    filter: blur(8px);
  }
  70% {
    opacity: 1;
    transform: scale(.92);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes super-nice-fx-letter-hit {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  68% {
    opacity: 1;
    filter: blur(0);
    transform: scale(.78) rotate(3deg);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) rotate(-2deg);
  }
}

@keyframes super-nice-fx-bakuretsu-title {
  0% {
    opacity: 0;
    transform: scale(.15) skewX(-12deg);
  }
  65% {
    opacity: 1;
    transform: scale(1.16) skewX(-12deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) skewX(-12deg);
  }
}

@keyframes super-nice-fx-bakuretsu-flash {
  0%, 8%, 18%, 26%, 36%, 43%, 53%, 60%, 70%, 100% { opacity: 0; }
  11% { opacity: .9; }
  29% { opacity: .82; }
  46% { opacity: .92; }
  63% { opacity: 1; }
}

@keyframes super-nice-fx-rush-shake {
  0%, 100% { transform: translate(0, 0); }
  12% { transform: translate(-12px, 8px); }
  24% { transform: translate(10px, -9px); }
  38% { transform: translate(-8px, -5px); }
  52% { transform: translate(13px, 7px); }
  68% { transform: translate(-7px, 10px); }
  84% { transform: translate(8px, -6px); }
}

@keyframes super-nice-fx-rush-hit {
  0% {
    opacity: 0;
    filter: blur(16px);
    transform: scale(5) rotate(-18deg);
  }
  22% {
    opacity: 1;
    filter: blur(0);
    transform: scale(.72) rotate(7deg);
  }
  34% {
    transform: scale(1.08) rotate(-4deg);
  }
  48% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@keyframes super-nice-fx-rush-title {
  0% {
    opacity: 0;
    transform: translateX(-55vw) skewX(-14deg);
  }
  72% {
    opacity: 1;
    transform: translateX(4vw) skewX(-14deg);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skewX(-14deg);
  }
}

@keyframes super-nice-fx-rush-visual {
  0% {
    opacity: 0;
    transform: scale(1.18);
    filter: brightness(2.2);
  }
  18% {
    opacity: 1;
    filter: brightness(1.5);
  }
  42% {
    opacity: 1;
    transform: scale(1.04);
    filter: brightness(.72);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(.62);
  }
}

@keyframes super-nice-fx-rush-flash {
  0%, 12%, 30%, 48%, 67%, 100% { opacity: 0; }
  5%, 23%, 41%, 60% { opacity: .82; }
}

@keyframes super-nice-fx-magic-circle-clockwise {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.12) rotate(-80deg);
  }
  28% { opacity: 1; }
  68% {
    opacity: .92;
    transform: translate(-50%, -50%) scale(1) rotate(35deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.18) rotate(90deg);
  }
}

@keyframes super-nice-fx-magic-circle-counter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.18) rotate(80deg);
  }
  25% { opacity: .9; }
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04) rotate(-30deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.24) rotate(-85deg);
  }
}

@keyframes super-nice-fx-magic-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.015);
    filter: grayscale(1) brightness(3.4) blur(8px);
  }
  28% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.18);
    filter: grayscale(1) brightness(2.8) blur(0);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.62);
    filter: grayscale(1) brightness(4.2);
  }
  78% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
    filter: grayscale(1) brightness(5.2) contrast(1.05);
  }
  100% {
    opacity: .15;
    transform: translate(-50%, -50%) scale(1.42);
    filter: grayscale(1) brightness(6) blur(4px);
  }
}

@keyframes super-nice-fx-magic-title {
  0% {
    opacity: 0;
    transform: scale(.12);
    filter: blur(12px) brightness(2.4);
  }
  68% {
    opacity: 1;
    transform: scale(1.12);
    filter: blur(0) brightness(1.4) drop-shadow(0 0 28px #fff);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 14px #fff) drop-shadow(0 0 34px #ffd85a);
  }
}

@keyframes super-nice-fx-clouds-back {
  0% {
    opacity: 0;
    transform: translateX(-12%) scale(.92);
  }
  18% { opacity: .36; }
  55% { opacity: .52; }
  100% {
    opacity: .3;
    transform: translateX(12%) scale(1.08);
  }
}

@keyframes super-nice-fx-clouds-front {
  0% {
    opacity: 0;
    transform: translateX(12%) scale(1.02);
  }
  20% { opacity: .46; }
  58% { opacity: .66; }
  100% {
    opacity: .4;
    transform: translateX(-12%) scale(1.2);
  }
}

@keyframes super-nice-fx-glyph-drop {
  0% {
    opacity: 0;
    transform: translateY(-120vh) scale(1.8) rotate(-7deg);
  }
  70% {
    opacity: 1;
    transform: translateY(7%) scale(.86) rotate(3deg);
  }
  86% {
    transform: translateY(-3%) scale(1.08) rotate(-1deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

@keyframes super-nice-fx-title-drop {
  0% {
    opacity: 0;
    transform: translateY(-100vh) scale(1.7);
  }
  72% {
    opacity: 1;
    transform: translateY(6%) scale(.82);
  }
  88% {
    transform: translateY(-2%) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes super-nice-fx-random-blast {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--blast-rotation)) scale(.05);
  }
  22% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--blast-rotation)) scale(1.08);
  }
  48% {
    opacity: .95;
    transform: translate(-50%, -50%) rotate(var(--blast-rotation)) scale(.92);
  }
  66% {
    opacity: .58;
    transform: translate(-50%, -50%) rotate(var(--blast-rotation)) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--blast-rotation)) scale(1.34);
  }
}

@keyframes super-nice-fx-final-blast {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-8deg) scale(.02);
  }
  12% {
    opacity: 1;
    filter: brightness(2.6) saturate(1.35) contrast(1.12)
      drop-shadow(0 0 7vmax #ff8a00);
    transform: translate(-50%, -50%) rotate(-4deg) scale(.16);
  }
  48% {
    opacity: 1;
    filter: brightness(2) saturate(1.2) contrast(1.08)
      drop-shadow(0 0 9vmax #ff5a00);
    transform: translate(-50%, -50%) rotate(2deg) scale(.72);
  }
  76% {
    opacity: .92;
    filter: brightness(3.2) saturate(.7) contrast(1.02)
      drop-shadow(0 0 12vmax #fff);
    transform: translate(-50%, -50%) rotate(5deg) scale(1);
  }
  100% {
    opacity: 0;
    filter: brightness(4) saturate(.2) contrast(1)
      drop-shadow(0 0 15vmax #fff);
    transform: translate(-50%, -50%) rotate(8deg) scale(1.16);
  }
}

@keyframes super-nice-fx-curtain-left {
  0% { transform: translateX(0) skewX(0); }
  35% { transform: translateX(-12%) skewX(2deg); }
  100% { transform: translateX(-96%) skewX(8deg); }
}

@keyframes super-nice-fx-curtain-right {
  0% { transform: translateX(0) skewX(0); }
  35% { transform: translateX(12%) skewX(-2deg); }
  100% { transform: translateX(96%) skewX(-8deg); }
}

@keyframes super-nice-fx-divine-light {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(.05);
  }
  35% { opacity: 1; }
  100% {
    opacity: .78;
    transform: translateX(-50%) scaleX(1);
  }
}

@keyframes super-nice-fx-divine-world {
  0% {
    opacity: .18;
    transform: scale(1.16);
    filter: blur(16px) brightness(.32) saturate(.65);
  }
  52% {
    opacity: 1;
    filter: blur(2px) brightness(1.28) saturate(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1.03);
    filter: blur(0) brightness(.82) saturate(.9);
  }
}

@keyframes super-nice-fx-divine-halo {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.15);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }
  100% {
    opacity: .85;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes super-nice-fx-divine-title {
  0% {
    opacity: 0;
    filter: blur(14px);
    transform: scale(.2);
  }
  70% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.13);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@keyframes super-nice-fx-divine-final {
  0% {
    opacity: 0;
    transform: translateY(18px);
    letter-spacing: .8em;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: .36em;
  }
}

@keyframes super-nice-fx-divine-flash {
  0%, 100% { opacity: 0; }
  22% { opacity: .92; }
  48% { opacity: .12; }
  67% { opacity: .65; }
}

@media (prefers-reduced-motion: reduce) {
  .super-nice-fx__vignette,
  .super-nice-fx__flash,
  .super-nice-fx__title {
    animation: none;
  }

  .super-nice-fx__content {
    animation-duration: .2s;
    animation-delay: 0s;
  }

  .super-nice-fx__point,
  .super-nice-fx__message,
  .super-nice-fx__impact-word span,
  .super-nice-fx__bakuretsu-title,
  .super-nice-fx__rush-title,
  .super-nice-fx__rush-visual,
  .super-nice-fx__gold-seal,
  .super-nice-fx__gold-final,
  .super-nice-fx__curtain,
  .super-nice-fx__divine-light,
  .super-nice-fx__divine-halo,
  .super-nice-fx__divine-world,
  .super-nice-fx__divine-title,
  .super-nice-fx__divine-final {
    animation-delay: .15s;
    animation-duration: .2s;
  }
}

@media (max-width: 600px) {
  .super-nice-fx__impact-word {
    gap: 18px;
  }

  .super-nice-fx__rush-title {
    bottom: 29vh;
  }

  .super-nice-fx--rush .super-nice-fx__point {
    bottom: 19vh;
  }
}
