:root {
  --ink: #38204c;
  --pink: #f04fb8;
  --cyan: #28d4e8;
  --yellow: #efd149;
  --page: #eee4f8;
  --screen: #151c2c;
  --body-bg: #fff;
  --shell-top: #fdf5fb;
  --shell-bottom: #eee4f8;
  --deck-top: #fffafd;
  --deck-bottom: #f6e8f5;
  --hud-bg: #fffafd;
  --panel-a: #71337f;
  --panel-b: #3c748b;
  --overlay-bg: #65357d;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--body-bg);
  font-family: "Courier New", monospace;
}
body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    max(5px, env(safe-area-inset-top))
    max(5px, env(safe-area-inset-right))
    max(5px, env(safe-area-inset-bottom))
    max(5px, env(safe-area-inset-left));
  color: #24152f;
  overflow: hidden;
  overscroll-behavior: none;
}
@media (display-mode: fullscreen), (display-mode: standalone) {
  body {
    padding:
      env(safe-area-inset-top)
      env(safe-area-inset-right)
      env(safe-area-inset-bottom)
      env(safe-area-inset-left);
    background: var(--shell-bottom);
  }
  .app {
    border-radius: 0;
    box-shadow: none;
  }
}
body[data-theme="neon-night"] {
  --ink: #35165f;
  --pink: #ff3ec8;
  --cyan: #31efff;
  --yellow: #dfff48;
  --page: #18133a;
  --screen: #070b24;
  --body-bg: #0d0820;
  --shell-top: #34205e;
  --shell-bottom: #17102f;
  --deck-top: #f5ecff;
  --deck-bottom: #dcd5f3;
  --hud-bg: #f8f2ff;
  --panel-a: #80207d;
  --panel-b: #176f89;
  --overlay-bg: #4d216f;
}
body[data-theme="sunset-drive"] {
  --ink: #48224e;
  --pink: #ff6b7f;
  --cyan: #65ddec;
  --yellow: #ffca62;
  --page: #f0c5d8;
  --screen: #21132f;
  --body-bg: #fff0e8;
  --shell-top: #fff0da;
  --shell-bottom: #e8bddb;
  --deck-top: #fff8ec;
  --deck-bottom: #f3d4df;
  --hud-bg: #fff9ee;
  --panel-a: #99466f;
  --panel-b: #c25d62;
  --overlay-bg: #723b69;
}
body[data-theme="ice-circuit"] {
  --ink: #284961;
  --pink: #65bce8;
  --cyan: #83eaf4;
  --yellow: #e9fbff;
  --page: #d9eef5;
  --screen: #10273c;
  --body-bg: #edfaff;
  --shell-top: #f7fdff;
  --shell-bottom: #cfe7ef;
  --deck-top: #fbfeff;
  --deck-bottom: #e0f1f6;
  --hud-bg: #f9fdff;
  --panel-a: #4e7e9d;
  --panel-b: #4ca3ad;
  --overlay-bg: #426a86;
}
body[data-theme="gold-rush"] {
  --ink: #3b2a12;
  --pink: #e4b93f;
  --cyan: #75d8d0;
  --yellow: #fff2a1;
  --page: #cda94e;
  --screen: #17130b;
  --body-bg: #211a0d;
  --shell-top: #f5dea0;
  --shell-bottom: #b98b2d;
  --deck-top: #fff9dc;
  --deck-bottom: #e8d39a;
  --hud-bg: #fff9e1;
  --panel-a: #76531d;
  --panel-b: #9d762a;
  --overlay-bg: #5d431f;
}
button {
  font: inherit;
  font-weight: 900;
}
button:focus-visible {
  outline: 2px solid #28d4e8;
  outline-offset: 2px;
}
.game-fit {
  flex: 0 0 auto;
  width: 390px;
  max-width: 100%;
}
.app {
  width: 390px;
  padding: 9px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--shell-top), var(--shell-bottom));
  box-shadow:
    5px 5px 0 #d8c4e7,
    inset 2px 2px 0 #fff;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
  transform-origin: top left;
}
.deck {
  width: min(100%, 340px);
  margin: 0 auto;
  border: 3px solid var(--ink);
  border-radius: 11px;
  background: linear-gradient(180deg, var(--deck-top), var(--deck-bottom));
  box-shadow:
    3px 3px 0 #d3c1e0,
    inset 2px 2px 0 #fff;
  overflow: hidden;
}
.marquee {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  min-height: 60px;
  padding: 4px 6px;
  border-bottom: 2px solid var(--ink);
  background: var(--pink);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.3);
}
.headctrls {
  display: flex;
  gap: 5px;
}
.brand {
  text-align: center;
}
.brand strong {
  display: block;
  color: #fffbd0;
  font-size: 19px;
  line-height: 1;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 #75246d;
}
.buildtag {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 4px;
  border: 1px solid #fff5ad;
  border-radius: 3px;
  color: #fffbd0;
  font-size: 7px;
  letter-spacing: 0.08em;
  line-height: 1;
}
.mark {
  display: grid;
  grid-template-columns: repeat(2, 7px);
  gap: 3px;
  justify-content: center;
}
.mark i {
  width: 7px;
  height: 7px;
  background: #76edff;
  box-shadow: 2px 2px 0 #78226c;
}
.mark i:nth-child(2) {
  background: #ffe052;
}
.mark i:nth-child(3) {
  background: #70e99a;
}
.marquee button {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid #fff5ad;
  border-radius: 6px;
  background: #74338b;
  color: #fffbd0;
  box-shadow: 2px 2px 0 #7f236c;
  transition: transform 0.1s, box-shadow 0.1s;
}
.marquee button.muted {
  background: #4a2159;
  opacity: 0.75;
}
.marquee button:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 #7f236c;
}
@media (hover: hover) {
  .marquee button:hover {
    filter: brightness(1.12);
  }
}
.hud {
  display: grid;
  grid-template-columns: 1fr 116px 1fr;
  align-items: stretch;
  min-height: 106px;
  background: var(--hud-bg);
  font-family: Arial, Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
}
.hud-stat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 11px 3px 8px;
  text-align: center;
}
.hud-stat span,
.next-label {
  color: #4d315c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.7px;
}
.hud-stat b {
  display: block;
  max-width: 100%;
  margin-top: 4px;
  overflow: hidden;
  color: #2f193c;
  font-family: "Courier New", monospace;
  font-size: 23px;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#rank {
  display: inline-block;
  max-width: 100%;
  margin-top: 7px;
  padding: 2px 6px;
  border: 1px solid #54204f;
  border-radius: 4px;
  color: #fff7d8;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.4px;
  text-shadow: 1px 1px 0 #66416f;
  background: linear-gradient(180deg, #9d4b91, #713168);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    1px 1px 0 #d7c5e4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#score {
  color: #086f82;
  font-size: 23px;
}
.hud-stat small {
  display: block;
  margin-top: 7px;
  padding: 2px 5px;
  border-radius: 3px;
  background: #eee0ed;
  color: #4b2858;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.35px;
}
.ranktrack {
  width: 76%;
  height: 7px;
  margin-top: 5px;
  overflow: hidden;
  border: 1px solid #76527f;
  border-radius: 4px;
  background: #d7c5dd;
  box-shadow: inset 0 1px 1px rgba(54, 29, 67, 0.24);
}
.ranktrack i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #e83ba7, #34d8ea);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.5s steps(10, end);
}
.score-stat.rank-close .ranktrack {
  animation: ranknear 1.1s ease-in-out infinite;
}
.score-stat.rank-critical .ranktrack {
  animation-duration: 0.48s;
  border-color: #8a255f;
}
.score-stat.rank-critical #rank {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 9px rgba(240, 79, 184, 0.75);
}
.score-stat.up {
  z-index: 2;
  animation: rankup 1.35s steps(9, end);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nextcell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 11px 0 4px;
  background: linear-gradient(180deg, #f9edf6, #fffafd);
  border-right: 1px solid #cfbdd8;
  border-left: 1px solid #cfbdd8;
}
.next-label {
  text-align: center;
}
#next {
  display: block;
  width: 104px;
  height: 60px;
  image-rendering: pixelated;
}
.level-strip {
  padding: 2px 8px 9px;
}
.leveltrack {
  position: relative;
  height: 18px;
  overflow: hidden;
  border: 2px solid #80648d;
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.35) 0 1px,
      transparent 1px calc(10% - 1px),
      rgba(82, 54, 96, 0.28) calc(10% - 1px) 10%
    ),
    linear-gradient(180deg, #e5d8e9, #cdbbd5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(116, 86, 131, 0.2);
}
.leveltrack.active {
  animation: progresspulse var(--pulse-speed, 1.3s) ease-in-out infinite;
}
.leveltrack i {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(180deg, #fff074, #f4b72f);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.48);
  transition: transform 0.45s steps(8, end);
}
.leveltrack i::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  content: "";
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.78) 48%,
    transparent 76%
  );
  opacity: 0;
  transform: translateX(-110%);
}
.leveltrack.shine i::after {
  animation: progressshine 0.7s 0.38s linear 1 both;
}
.leveltrack.hot i {
  background: linear-gradient(180deg, #fff598, #ffad2e);
}
.leveltrack.critical {
  border-color: #8a285f;
  outline: 2px solid rgba(240, 79, 184, 0.25);
  outline-offset: 1px;
}
#levelcard.up {
  animation: levelup 0.95s steps(7, end);
}
.fevercard {
  padding: 7px 9px 9px;
  border-top: 1px solid #d1bfd9;
  background: linear-gradient(180deg, #fffafd, #f7eaf4);
  font-family: Arial, Helvetica, sans-serif;
  transition:
    background 0.25s,
    box-shadow 0.25s;
}
.fever-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  color: #553360;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}
.fever-head b {
  color: #8a296e;
  font-size: 11px;
}
.fevertrack {
  height: 12px;
  overflow: hidden;
  border: 2px solid #704a7d;
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.2) 0 1px,
      transparent 1px calc(10% - 1px),
      rgba(72, 43, 87, 0.28) calc(10% - 1px) 10%
    ),
    linear-gradient(180deg, #d8c8df, #bdabc7);
  box-shadow: inset 0 1px 1px rgba(47, 25, 60, 0.3);
}
.fevertrack i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #ed3da9, #ffcf3b, #27d4e8);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.28s steps(10, end);
}
.fevercard.ready {
  animation: feverready 0.35s steps(2, end) infinite;
}
.fevercard.on {
  background: linear-gradient(90deg, #54235f, #8b286f, #3a657d);
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.2),
    0 0 12px rgba(240, 79, 184, 0.65);
}
.fevercard.on .fever-head,
.fevercard.on .fever-head b {
  color: #fff68b;
  text-shadow: 1px 1px 0 #51204f;
}
.fevercard.on .fevertrack {
  border-color: #fff18a;
  background: #44204d;
}
.fevercard.on .fevertrack i {
  background: linear-gradient(90deg, #2ce8ef, #fff06a, #ff4db7);
  transition: transform 0.1s linear;
}
.boardwrap {
  position: relative;
  width: min(100%, 340px);
  margin: 9px auto 3px;
}
#game {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/2;
  border: 3px solid var(--ink);
  border-radius: 6px;
  background: var(--screen);
  box-shadow:
    0 0 0 3px #dfb8d6,
    4px 4px 0 #b592ac,
    inset 0 0 0 2px #52617e;
  image-rendering: pixelated;
  touch-action: none;
}
.boardwrap.fever-mode #game {
  animation: feverframe 0.62s ease-in-out infinite;
}
body.compact-fit .marquee {
  min-height: 48px;
  padding-top: 2px;
  padding-bottom: 2px;
}
body.compact-fit .marquee button {
  width: 40px;
  height: 40px;
}
body.compact-fit .hud {
  min-height: 88px;
}
body.compact-fit .hud-stat {
  padding: 5px 3px 4px;
}
body.compact-fit #rank {
  margin-top: 4px;
}
body.compact-fit .ranktrack {
  margin-top: 3px;
}
body.compact-fit .hud-stat small {
  margin-top: 4px;
}
body.compact-fit .nextcell {
  padding: 5px 0 2px;
}
body.compact-fit #next {
  width: 100px;
  height: 50px;
}
body.compact-fit #levelcard {
  float: none;
  width: auto;
  padding: 2px 8px 6px;
  border-right: 0;
}
body.compact-fit .leveltrack {
  height: 16px;
}
body.compact-fit .fevercard {
  float: none;
  width: auto;
  padding: 5px 9px 6px;
}
body.compact-fit .fever-head {
  margin-bottom: 3px;
}
body.compact-fit .fevertrack {
  height: 11px;
}
body.compact-fit .app {
  padding-top: 5px;
  padding-bottom: 5px;
}
body.compact-fit .boardwrap {
  margin-top: 5px;
  margin-bottom: 1px;
}
.overlay {
  position: absolute;
  inset: 3px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(25, 15, 34, 0.91);
  text-align: center;
}
.overlay[hidden] {
  display: none;
}
.overlaycard {
  width: 100%;
  padding: 17px 11px;
  border: 2px solid #fff0a1;
  border-radius: 7px;
  background: var(--overlay-bg);
  box-shadow: 3px 3px 0 #2a1536;
  font-family: Arial, Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
}
.title-brand {
  display: none;
}
.overlay-actions {
  width: 100%;
}
.overlay.title-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: stretch;
  padding: 0;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(1, 2, 15, 0.05), rgba(1, 2, 15, 0.12) 48%, rgba(1, 2, 15, 0.72) 100%),
    url("../images/title-screen.png") center / cover no-repeat;
}
.overlay.title-screen .overlaycard {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  padding: 16px 14px 18px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, transparent 0 43%, rgba(3, 3, 24, 0.08) 58%, rgba(3, 3, 24, 0.78) 100%);
  box-shadow: none;
}
.overlay.title-screen .title-brand {
  position: absolute;
  top: 7.5%;
  left: 12px;
  right: 12px;
  display: block;
  color: #fff;
  text-align: center;
  filter: drop-shadow(0 0 12px rgba(35, 207, 255, 0.82));
}
.overlay.title-screen .title-brand strong {
  display: block;
  color: #fff;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(38px, 13vw, 54px);
  font-style: italic;
  line-height: 0.92;
  letter-spacing: 2px;
  text-shadow:
    0 2px 0 #4421b2,
    0 0 8px #00c9ff,
    0 0 20px rgba(241, 41, 215, 0.8);
}
.overlay.title-screen .title-brand span {
  display: block;
  margin-top: 9px;
  color: #b9f7ff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-shadow: 0 0 8px #0bd8ff;
}
.overlay.title-screen #otop,
.overlay.title-screen #otitle,
.overlay.title-screen #otext {
  display: none;
}
.overlay.title-screen .overlay-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.overlay.title-screen .overlay-actions button {
  min-height: 42px;
  margin: 0;
  border-color: rgba(255, 245, 178, 0.92);
  background: rgba(237, 70, 173, 0.9);
  backdrop-filter: blur(5px);
}
.overlay.title-screen #start,
.overlay.title-screen #install {
  grid-column: 1 / -1;
}
.overlay.title-screen #start {
  min-height: 52px;
  font-size: 15px;
}
.overlay.title-screen #achievements,
.overlay.title-screen #missions,
.overlay.title-screen #skins,
.overlay.title-screen #statistics,
.overlay.title-screen #install {
  margin-top: 0;
}
.overlay small {
  display: block;
  color: #9af4ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
}
.overlay h2 {
  margin: 8px 0 0;
  color: #fff08c;
  font-size: 26px;
  line-height: 1.05;
}
.overlay p {
  margin: 13px 0 0;
  color: #fffaff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.overlay button {
  width: 100%;
  min-height: 50px;
  margin-top: 14px;
  border: 2px solid #fff0a1;
  border-radius: 5px;
  background: #ed46ad;
  color: #1c0e26;
  font-size: 14px;
  letter-spacing: 0.8px;
  box-shadow: 0 3px 0 #7d1d65;
  transition: transform 0.1s, box-shadow 0.1s;
}
.overlay button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #7d1d65;
}
@media (hover: hover) {
  .overlay button:hover {
    filter: brightness(1.08);
  }
}
#install {
  background: #25a8bd;
  color: #0a2a30;
  box-shadow: 0 3px 0 #176879;
  margin-top: 7px;
}
#achievements {
  margin-top: 8px;
  background: #2aa9bd;
  color: #082b31;
  box-shadow: 0 3px 0 #176879;
}
#achievements:active {
  box-shadow: 0 1px 0 #176879;
}
#missions {
  margin-top: 8px;
  background: #ff86c9;
  color: #43163b;
  box-shadow: 0 3px 0 #9d3978;
}
#missions:active {
  box-shadow: 0 1px 0 #9d3978;
}
#skins {
  margin-top: 8px;
  background: #8ce5b9;
  color: #183b32;
  box-shadow: 0 3px 0 #40856d;
}
#skins:active {
  box-shadow: 0 1px 0 #40856d;
}
#statistics {
  margin-top: 8px;
  background: #fff080;
  color: #49214e;
  box-shadow: 0 3px 0 #9b6926;
}
#statistics:active {
  box-shadow: 0 1px 0 #9b6926;
}
#install:active {
  box-shadow: 0 1px 0 #176879;
}
#install[hidden] {
  display: none;
}
.install-panel {
  position: fixed;
  inset: 0;
  z-index: 130;
  align-items: center;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}
.install-panel:not([hidden]) {
  display: flex;
}
.install-card {
  height: auto;
  max-height: 100%;
}
.install-content {
  padding: 18px 17px 20px;
  color: #43294e;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
.install-content p {
  margin: 0;
}
.install-content ol {
  margin: 14px 0 0;
  padding-left: 22px;
}
.install-content li + li {
  margin-top: 9px;
}
.achievement-toast {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 12;
  width: 90%;
  padding: 11px 10px;
  pointer-events: none;
  border: 2px solid #fff080;
  border-radius: 7px;
  opacity: 0;
  background: linear-gradient(135deg, #542466, #237b8d);
  box-shadow:
    3px 3px 0 #24122d,
    0 0 15px rgba(40, 212, 232, 0.7);
  text-align: center;
  transform: translateX(-50%);
}
.achievement-toast[hidden] {
  display: none;
}
.achievement-toast small,
.achievement-toast strong,
.achievement-toast span {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
}
.achievement-toast small {
  color: #8df5ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
}
.achievement-toast strong {
  margin-top: 4px;
  color: #fff27b;
  font-size: 18px;
  line-height: 1.05;
}
.achievement-toast span {
  margin-top: 4px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.achievement-toast.show {
  animation: achievementpop 2.2s steps(14, end) both;
}
.mission-toast {
  position: absolute;
  bottom: 14px;
  left: 50%;
  z-index: 13;
  width: 90%;
  padding: 12px 10px;
  pointer-events: none;
  border: 2px solid #fff080;
  border-radius: 7px;
  opacity: 0;
  background: linear-gradient(135deg, #75306f, #277d8c);
  box-shadow:
    3px 3px 0 #24122d,
    0 0 16px rgba(255, 229, 83, 0.65);
  text-align: center;
  transform: translateX(-50%);
}
.mission-toast[hidden] {
  display: none;
}
.mission-toast small,
.mission-toast strong,
.mission-toast span {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
}
.mission-toast small {
  color: #8ff5ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.1px;
}
.mission-toast strong {
  margin-top: 4px;
  color: #fff27b;
  font-size: 19px;
  line-height: 1.05;
}
.mission-toast span {
  margin-top: 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.mission-toast.show {
  animation: missionpop 2.2s steps(14, end) both;
}
.achievement-panel {
  position: absolute;
  inset: 3px;
  z-index: 14;
  padding: 10px;
  background: rgba(24, 13, 32, 0.96);
}
.achievement-panel[hidden] {
  display: none;
}
.achievement-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 2px solid #fff080;
  border-radius: 8px;
  background: #f8edf6;
  box-shadow: 3px 3px 0 #281433;
  font-family: Arial, Helvetica, sans-serif;
}
.achievement-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: linear-gradient(135deg, var(--panel-a), var(--panel-b));
}
.achievement-card header small {
  display: block;
  color: #8ff4ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.3px;
}
.achievement-card h2 {
  margin: 3px 0 0;
  color: #fff27c;
  font-size: 22px;
}
.achievement-card header button {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid #fff080;
  border-radius: 6px;
  background: #e948aa;
  color: #32163c;
  font-size: 25px;
  line-height: 1;
  box-shadow: 2px 2px 0 #431a4b;
}
#achievementsummary {
  margin: 0;
  padding: 9px 12px;
  border-bottom: 1px solid #cfbdd8;
  color: #5b3565;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.4px;
}
.result-summary {
  margin-top: 12px;
  padding: 10px 8px 9px;
  border: 2px solid #73e8f3;
  border-radius: 6px;
  background: #3c2560;
  box-shadow: inset 3px 0 0 #ed46ad;
}
.result-summary strong,
.result-summary span {
  display: block;
}
.result-summary strong {
  color: #fff080;
  font-size: 15px;
  line-height: 1.1;
  letter-spacing: 0.8px;
}
.result-summary span {
  margin-top: 5px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.3;
}
.result-summary.record {
  border-color: #fff080;
  background: linear-gradient(135deg, #783474, #237c8c);
  box-shadow:
    inset 4px 0 0 #fff080,
    0 0 12px rgba(255, 240, 128, 0.55);
}
#statisticssummary {
  margin: 0;
  padding: 9px 12px;
  border-bottom: 1px solid #cfbdd8;
  color: #5b3565;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.4px;
}
#missionsummary {
  margin: 0;
  padding: 9px 12px;
  border-bottom: 1px solid #cfbdd8;
  color: #5b3565;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.4px;
}
#skinsummary {
  margin: 0;
  padding: 9px 12px;
  border-bottom: 1px solid #cfbdd8;
  color: #5b3565;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.4px;
}
.skin-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  scrollbar-color: #8d4b87 #e8dce9;
}
.skin-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  min-height: 112px;
  padding: 9px;
  border: 1px solid #c6b4cc;
  border-radius: 7px;
  background: #fff;
  color: #64466c;
}
.skin-item + .skin-item {
  margin-top: 7px;
}
.skin-item.selected {
  border: 2px solid var(--skin-a);
  background: #fff9db;
  box-shadow:
    inset 4px 0 0 var(--skin-b),
    0 0 10px color-mix(in srgb, var(--skin-a) 42%, transparent);
}
.skin-item.locked .skin-preview {
  filter: saturate(0.45) brightness(0.82);
}
.skin-preview {
  display: grid;
  grid-row: span 2;
  width: 92px;
  height: 88px;
  place-items: center;
  overflow: hidden;
  border: 3px solid var(--skin-a);
  border-radius: 7px;
  background:
    linear-gradient(180deg, var(--skin-a) 0 22px, transparent 22px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 16px),
    var(--skin-screen);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--skin-c) 55%, transparent),
    2px 2px 0 #a58fac;
}
.skin-preview::before {
  position: absolute;
  content: "";
}
.skin-preview-blocks {
  display: grid;
  grid-template-columns: repeat(4, 13px);
  grid-template-rows: repeat(2, 13px);
  gap: 2px;
  margin-top: 18px;
}
.skin-preview-blocks i {
  background: var(--skin-b);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.42);
}
.skin-preview-blocks i:nth-child(1),
.skin-preview-blocks i:nth-child(7) {
  visibility: hidden;
}
.skin-preview-blocks i:nth-child(3),
.skin-preview-blocks i:nth-child(5) {
  background: var(--skin-c);
}
.skin-item strong,
.skin-item small,
.skin-item b {
  display: block;
}
.skin-item strong {
  color: #4d2b57;
  font-size: 14px;
  line-height: 1.05;
}
.skin-item small {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.2;
}
.skin-item b {
  margin-top: 5px;
  color: #8f2f74;
  font-size: 14px;
}
.skin-item button {
  min-height: 38px;
  padding: 5px 8px;
  border: 2px solid #70406c;
  border-radius: 5px;
  background: var(--skin-a);
  color: #29142e;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 2px 0 #75406c;
}
.skin-item button:disabled {
  border-color: #b5a5ba;
  background: #ddd1e0;
  color: #79687d;
  box-shadow: none;
}
.skin-item.selected button:disabled {
  border-color: color-mix(in srgb, var(--skin-a) 70%, #42334a);
  background: color-mix(in srgb, var(--skin-b) 35%, #fff);
  color: #32565b;
}
.mission-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  scrollbar-color: #8d4b87 #e8dce9;
}
.mission-streak {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  align-items: center;
  padding: 10px;
  border: 1px solid #9d6092;
  border-radius: 7px;
  background: linear-gradient(135deg, #fff7d8, #dff8f8);
  box-shadow: inset 4px 0 0 #2dcfe0;
}
.mission-streak span,
.mission-streak strong,
.mission-streak small {
  font-weight: 900;
}
.mission-streak span {
  color: #6a4970;
  font-size: 11px;
}
.mission-streak strong {
  grid-row: span 2;
  color: #8c2f74;
  font-size: 17px;
}
.mission-streak small {
  color: #76547b;
  font-size: 10px;
}
.mission-list {
  margin-top: 8px;
}
.mission-item {
  padding: 10px;
  border: 1px solid #c5b0cc;
  border-radius: 7px;
  background: #fff;
  color: #624369;
}
.mission-item + .mission-item {
  margin-top: 7px;
}
.mission-item.complete {
  border-color: #a35d94;
  background: #fff9de;
  box-shadow: inset 4px 0 0 #f2c83d;
}
.mission-item.claimed {
  background: #e8f7ef;
  box-shadow: inset 4px 0 0 #37bca2;
}
.mission-item > div:first-child,
.mission-item > div:last-child,
.mission-bonus > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mission-item strong,
.mission-item small {
  display: block;
}
.mission-item strong {
  color: #542b5e;
  font-size: 14px;
  line-height: 1.1;
}
.mission-item small {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.25;
}
.mission-item b {
  color: #902f76;
  font-size: 16px;
}
.mission-progress {
  height: 12px;
  margin-top: 9px;
  overflow: hidden;
  border: 1px solid #84618d;
  border-radius: 6px;
  background: #d8c8df;
  box-shadow: inset 0 1px 1px rgba(54, 29, 67, 0.25);
}
.mission-progress i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, #e840a7, #f5d04a, #2ccfdf);
  transition: transform 0.35s steps(8, end);
}
.mission-item > div:last-child {
  margin-top: 8px;
}
.mission-item > div:last-child span {
  color: #76517a;
  font-size: 12px;
  font-weight: 900;
}
.mission-item button {
  min-width: 112px;
  min-height: 36px;
  padding: 5px 8px;
  border: 2px solid #70406c;
  border-radius: 5px;
  background: #ef48ac;
  color: #2c1431;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 2px 0 #8c2e72;
}
.mission-item button:disabled {
  border-color: #b7a7bd;
  background: #ded2e1;
  color: #7b6a80;
  box-shadow: none;
}
.mission-item.claimed button:disabled {
  border-color: #75af9f;
  background: #bde5d7;
  color: #306c60;
}
.mission-bonus {
  margin-top: 8px;
  padding: 10px;
  border: 2px dashed #a98a45;
  border-radius: 7px;
  background: #eee3ec;
  color: #745c78;
}
.mission-bonus span {
  font-size: 12px;
  font-weight: 900;
}
.mission-bonus strong {
  color: #9a3378;
  font-size: 18px;
}
.mission-bonus small {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
}
.mission-bonus.ready {
  border-style: solid;
  background: #fff5c8;
  box-shadow: 0 0 12px rgba(239, 209, 73, 0.55);
}
.mission-bonus.claimed {
  border-color: #65ad9b;
  border-style: solid;
  background: #dbf3ea;
}
.statistics-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  scrollbar-color: #8d4b87 #e8dce9;
}
.statistics-records {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.statistics-records > div {
  min-width: 0;
  padding: 10px 7px;
  border: 1px solid #9f6599;
  border-radius: 6px;
  background: linear-gradient(145deg, #fff9df, #e5f7f7);
  box-shadow: inset 3px 0 0 #2dcfe0;
}
.statistics-records small,
.statistics-records strong {
  display: block;
}
.statistics-records small {
  color: #78567c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.statistics-records strong {
  overflow: hidden;
  margin-top: 4px;
  color: #4a2454;
  font-size: 19px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.statistics-list {
  margin-top: 9px;
  overflow: hidden;
  border: 1px solid #cbb9d2;
  border-radius: 6px;
  background: #fff;
}
.statistics-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 7px 9px;
  color: #65476d;
  font-size: 12px;
  font-weight: 900;
}
.statistics-list > div:nth-child(even) {
  background: #f0e5f0;
}
.statistics-list strong {
  color: #862e73;
  font-size: 13px;
}
.achievement-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 7px;
  scrollbar-color: #8d4b87 #e8dce9;
}
.achievement-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 62px;
  padding: 8px;
  border: 1px solid #cbb9d2;
  border-radius: 6px;
  background: #e7dae9;
  color: #78667f;
}
.achievement-item + .achievement-item {
  margin-top: 6px;
}
.achievement-item.unlocked {
  border-color: #a05d94;
  background: #fff8dc;
  color: #3e2348;
  box-shadow: inset 3px 0 0 #2dcfe0;
}
.achievement-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 2px solid #a996b2;
  border-radius: 50%;
  background: #cfc0d4;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}
.achievement-item.unlocked .achievement-icon {
  border-color: #6c3868;
  background: linear-gradient(135deg, #e83ba7, #32cadc);
}
.achievement-item strong,
.achievement-item small {
  display: block;
}
.achievement-item strong {
  font-size: 14px;
  line-height: 1.1;
}
.achievement-item small {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.25;
}
.achievement-item > b {
  color: #8a2d72;
  font-size: 14px;
}
.ann {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 8;
  width: 98%;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -50%);
}
.ann strong {
  display: block;
  color: #fff271;
  font-size: 20px;
  white-space: nowrap;
  text-shadow: 3px 3px 0 #7d2c8c;
}
.ann span {
  display: block;
  margin-top: 4px;
  color: #8eefff;
  font-size: 10px;
  text-shadow: 2px 2px 0 #14354c;
}
.ann.show {
  animation: pop 0.95s steps(10, end);
}
.ann.p2 strong {
  font-size: 23px;
}
.ann.p3 strong {
  font-size: 26px;
}
.ann.p4 strong {
  font-size: 29px;
  color: #fff;
}
.ann.legend strong {
  color: #83f4ff;
}
.ann.levelup strong {
  color: #fff27a;
  font-size: 34px;
  text-shadow:
    4px 4px 0 #7d2c8c,
    0 0 14px rgba(255, 238, 80, 0.85);
}
.ann.levelup span {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.5px;
}
.ann.levelup.show {
  animation: levelpop 1.35s steps(12, end);
}
.ann.rankup strong {
  color: #ff9cdd;
  font-size: 36px;
  text-shadow:
    4px 4px 0 #54205f,
    0 0 16px rgba(255, 87, 190, 0.95);
}
.ann.rankup span {
  color: #fff17a;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-shadow: 2px 2px 0 #54205f;
}
.ann.rankup.show {
  animation: rankpop 1.4s steps(13, end);
}
.ann.fever strong {
  color: #fff36f;
  font-size: 35px;
  text-shadow:
    4px 4px 0 #7d246d,
    0 0 18px rgba(255, 75, 185, 0.95);
}
.ann.fever span {
  color: #78f4ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1px;
}
.ann.fever.show {
  animation: feverpop 1.3s steps(12, end);
}
.ann.gameover strong {
  color: #ff779f;
  font-size: 36px;
  text-shadow:
    4px 4px 0 #4b183d,
    0 0 18px rgba(255, 72, 132, 0.95);
}
.ann.gameover.show {
  animation: gameoverpop 1.5s steps(14, end);
}
.ann.danger strong {
  color: #ff8181;
}
.flash,
.burst {
  position: absolute;
  inset: 3px;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
}
.flash {
  background: #fff;
}
.burst {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 218, 58, 0.42) 0 8deg,
    transparent 8deg 18deg
  );
  transform: scale(1.8);
}
.flash.f1 {
  animation: f1 0.28s;
}
.flash.f2 {
  animation: f2 0.44s;
}
.flash.f3 {
  animation: f3 0.58s;
}
.flash.f4 {
  animation: f4 0.8s;
}
.burst.on {
  animation: burst 0.9s;
}
.boardwrap.shake {
  animation: shake 0.48s;
}
.boardwrap.boost {
  animation: boost 0.55s;
}
@keyframes rankup {
  10% {
    background: #fff3a0;
    transform: scale(1.08) rotate(-1deg);
    box-shadow: 0 0 16px rgba(255, 225, 76, 0.95);
  }
  27% {
    background: #f06bbe;
    transform: scale(1.03) rotate(1deg);
  }
  44% {
    background: #85eaf7;
    transform: scale(1.08) rotate(-1deg);
    box-shadow: 0 0 20px rgba(40, 212, 232, 0.95);
  }
  62% {
    background: #fff3a0;
    transform: scale(1.03) rotate(0);
  }
  80% {
    background: #f7d9ef;
    transform: scale(1.05);
  }
}
@keyframes ranknear {
  0%,
  100% {
    filter: brightness(1);
    box-shadow: inset 0 1px 1px rgba(54, 29, 67, 0.24);
  }
  50% {
    filter: brightness(1.22);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.65),
      0 0 9px rgba(232, 59, 167, 0.8);
  }
}
@keyframes feverready {
  50% {
    filter: brightness(1.28);
    box-shadow: 0 0 13px rgba(255, 190, 43, 0.85);
  }
}
@keyframes feverframe {
  0%,
  100% {
    box-shadow:
      0 0 0 3px #31ddec,
      4px 4px 0 #b592ac,
      0 0 12px rgba(49, 221, 236, 0.58),
      inset 0 0 0 2px #52617e;
  }
  50% {
    box-shadow:
      0 0 0 3px #ff57b9,
      4px 4px 0 #b592ac,
      0 0 22px rgba(255, 87, 185, 0.88),
      inset 0 0 0 2px #ffe86e;
  }
}
@keyframes levelhot {
  50% {
    filter: brightness(1.3);
  }
}
@keyframes progresspulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(var(--pulse-brightness, 1.14));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      inset 0 -1px 0 rgba(116, 86, 131, 0.2),
      0 0 var(--pulse-glow, 7px) rgba(255, 194, 47, 0.95);
  }
}
@keyframes progressshine {
  0% {
    opacity: 0;
    transform: translateX(-110%);
  }
  10% {
    opacity: 1;
  }
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(285%);
  }
}
@keyframes levelup {
  12% {
    background: #fff;
    transform: scaleY(1.3);
    box-shadow: 0 0 14px rgba(255, 230, 94, 0.95);
  }
  30% {
    background: #fff0a0;
  }
  48% {
    background: #f06bbe;
    box-shadow: 0 0 18px rgba(240, 79, 184, 0.9);
  }
  68% {
    background: #8cebf5;
  }
  84% {
    background: #fff0a0;
    transform: scaleY(1.12);
  }
}
@keyframes levelpop {
  0% {
    opacity: 0;
    transform: translate(-50%, 15%) scale(0.45);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.28);
  }
  32% {
    transform: translate(-50%, -50%) scale(0.98);
  }
  46%,
  76% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -90%) scale(1.18);
  }
}
@keyframes rankpop {
  0% {
    opacity: 0;
    transform: translate(-50%, 25%) scale(0.35) rotate(-5deg);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.38) rotate(2deg);
  }
  28% {
    transform: translate(-50%, -50%) scale(0.96) rotate(-1deg);
  }
  42%,
  76% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -95%) scale(1.24);
  }
}
@keyframes feverpop {
  0% {
    opacity: 0;
    transform: translate(-50%, 20%) scale(0.4);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.35);
  }
  30% {
    transform: translate(-50%, -50%) scale(0.96);
  }
  44%,
  76% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -90%) scale(1.18);
  }
}
@keyframes gameoverpop {
  0% {
    opacity: 0;
    transform: translate(-50%, 15%) scale(0.35);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.32);
  }
  28% {
    transform: translate(-50%, -50%) scale(0.96);
  }
  42%,
  82% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -75%) scale(1.18);
  }
}
@keyframes achievementpop {
  0% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(0.75);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.06);
  }
  22%,
  82% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -35%) scale(0.96);
  }
}
@keyframes missionpop {
  0% {
    opacity: 0;
    transform: translate(-50%, 70%) scale(0.78);
  }
  13% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.06);
  }
  24%,
  82% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 30%) scale(0.96);
  }
}
@keyframes pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -15%) scale(0.65);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.18);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(1.04);
  }
}
@keyframes f1 {
  50% {
    opacity: 0.2;
  }
}
@keyframes f2 {
  25%,
  65% {
    opacity: 0.3;
  }
}
@keyframes f3 {
  18%,
  48%,
  75% {
    opacity: 0.4;
  }
}
@keyframes f4 {
  12% {
    opacity: 0.8;
  }
  30% {
    opacity: 0.08;
  }
  48% {
    opacity: 0.65;
  }
  68% {
    opacity: 0.04;
  }
}
@keyframes burst {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  25% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: scale(2.3) rotate(32deg);
  }
}
@keyframes shake {
  15% {
    transform: translateX(-6px);
  }
  30% {
    transform: translateX(6px);
  }
  45% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(5px);
  }
}
@keyframes boost {
  25% {
    transform: scale(1.025);
  }
  55% {
    transform: scale(0.99);
  }
}
@media (max-width: 370px) {
  #next {
    width: 100px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .score-stat.up,
  .score-stat.rank-close .ranktrack,
  #levelcard.up,
  .leveltrack.active,
  .leveltrack.shine i::after,
  .leveltrack.hot i,
  .flash,
  .burst,
  .boardwrap.shake,
  .boardwrap.boost {
    animation: none !important;
  }
  .fevercard.ready,
  .boardwrap.fever-mode #game {
    animation: none !important;
  }
  .ann.show {
    animation: annreduced 1.3s ease-out both;
  }
  .achievement-toast.show {
    animation: annreduced 2.2s ease-out both;
  }
  .mission-toast.show {
    animation: annreduced 2.2s ease-out both;
  }
}
@keyframes annreduced {
  0%,
  100% {
    opacity: 0;
  }
  12%,
  82% {
    opacity: 1;
  }
}