@keyframes scaleUpDown {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes scaleDownUp {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes arrowDownUp {
  0% {
    transform: translateY(-50%);
  }
  50% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(-50%);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.press-animation {
  animation: scaleDownUp 0.01s ease-in;
}

.animation__arrow--updown {
  animation: arrowDownUp 1s linear infinite;
}

.separator {
  position: absolute;
  border-left: 1px dashed #9e9e9e;
  height: 50%;
  margin: 0 10px;
}

.rotate-animation {
  animation: rotate 5s linear infinite;
}

.vehicle-item::after,
.vehicle-item::before {
  pointer-events: none !important;
}

.black-25-alpha-shadow-inner {
  box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.black-25-alpha-shadow-inner_y-2 {
  box-shadow: inset 0 -2px 4px 0 rgba(0, 0, 0, 0.25);
}

.loading-bar {
  background: #ff8b71;
  background: linear-gradient(
    180deg,
    rgba(255, 139, 113, 1) 21%,
    rgba(255, 17, 17, 0.83) 78%,
    rgba(250, 71, 0, 0.98) 93%
  );
  box-shadow: 0 0 14px 0 rgba(255, 155, 155, 0.3);
}

.stage-name-text {
  text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white,
    -1px 1px 0 #f2c793b3,
    0 2px 1px #f5c497;
}

.text-stroke-FF2200 {
  text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white,
    0 2px 3.1px rgba(94, 66, 41, 0.6);
}

.text-stroke-F09E00 {
  text-shadow:
    -1px -1px 0 RGB(240, 158, 0),
    1px -1px 0 RGB(240, 158, 0),
    -1px 1px 0 RGB(240, 158, 0),
    1px 1px 0 RGB(240, 158, 0),
    -1px 1px 0 rgba(72, 44, 12, 0.7),
    0 4px 7px rgba(94, 66, 41, 1);
}

.shadow-431919 {
  box-shadow: inset 0 0 8px 0 #431919;
}

.btn-3d-shadow {
  box-shadow:
    0 0 14px 0 rgba(255, 155, 155, 0.3),
    0 9px 9px 0 rgba(115, 0, 0, 0.3);
}

.btn-3d-red {
  background: linear-gradient(
    180deg,
    rgba(255, 139, 113, 1) 21%,
    rgba(255, 17, 17, 1) 78%,
    rgba(250, 71, 0, 1) 93%
  );
}

.btn-3d-yellow {
  background: linear-gradient(
    180deg,
    rgb(243, 255, 113) 21%,
    rgb(255, 178, 0) 78%,
    rgb(250, 150, 0) 93%
  );
}

.btn-yellow-gradient {
  background: #fffcd8;
  background: linear-gradient(
    300deg,
    rgba(255, 252, 216, 1) 65%,
    rgb(255, 210, 140) 99%
  );
}

.text-shadow-7C0202 {
  text-shadow: 0 1px 2px rgb(124, 2, 2);
}

.text-shadow-mix-FFC2A2 {
  text-shadow:
    -1px -1px 0 rgb(255, 255, 5),
    1px -1px 0 rgb(255, 255, 5),
    -1px 1px 0 rgb(255, 255, 5),
    1px 1px 0 rgb(255, 255, 5),
    0 -2px 4px rgba(0, 0, 0, 0.25),
    0 1px 2.5px rgb(255, 194, 162);
}

.text-shadow-F1F9FF {
  text-shadow:
    -1px 1px 0 rgba(1, 26, 21, 0.25),
    0 3px 6px rgba(0, 0, 0, 0.5);
}

.text-shadow-disable {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

.rare-stamp-gradient {
  background: #ffa778;
  background: linear-gradient(
    180deg,
    rgba(243, 96, 76, 1),
    rgba(254, 5, 0, 1) 9%,
    rgba(255, 54, 54, 1) 41%,
    rgba(255, 92, 53, 1) 55%,
    rgba(255, 97, 53, 1) 77%,
    rgba(255, 166, 88, 1) 95%
  );
}

.page-shadow {
  box-shadow:
    -2px 2px 0 2px rgb(209, 178, 153),
    inset -16px 0 12px -8px rgba(238, 193, 138, 0.5);
}
.page-shadow-right {
  box-shadow:
    2px 2px 0 2px rgb(209, 178, 153),
    inset -16px 0 36px -8px rgba(238, 193, 138, 0.5);
}

.active-icon-page-bg {
  background: #ce3533;
  background: linear-gradient(
    120deg,
    rgba(206, 53, 51, 1) 0%,
    rgba(129, 26, 25, 1) 100%
  );
  box-shadow: inset -4px 4px 12px rgba(255, 255, 255, 0.35);
}

.icon-page-bg {
  background: #f6d540;
  background: linear-gradient(
    325deg,
    rgba(246, 213, 64, 1) 0%,
    rgba(250, 241, 229, 1) 100%
  );
  border: 1px solid white;
  box-shadow:
    inset -5px 4px 4px rgba(255, 149, 0, 0.25),
    2px 4px 5px rgba(82, 59, 0, 0.25);
}

.background-pattern {
  background-image: url("/assets/vector/bg-pattern.svg");
  background-repeat: repeat;
}

.background-pattern-small {
  background-image: url("/assets/vector/bg-pattern-small.svg");
  background-repeat: repeat;
}

.modal-shadow {
  box-shadow:
    inset -2px 2px 18px 2px rgba(255, 128, 22, 1),
    inset 20px -12px 20px -8px rgba(235, 129, 0, 0.5);
}

.floating-button {
  background: #ff7657;
  background: linear-gradient(
    110deg,
    rgba(255, 118, 87, 1) 0%,
    rgba(255, 17, 17, 1) 47%,
    rgba(250, 71, 0, 1) 98%
  );
}

.loading-bar-rgb {
  background: #ff454b;
  background: linear-gradient(
    90deg,
    rgba(255, 69, 75, 1) 0%,
    rgba(244, 117, 26, 1) 24%,
    rgba(234, 202, 26, 1) 52%,
    rgba(179, 228, 97, 1) 78%,
    rgba(140, 200, 50, 1) 100%
  );
}

.share-content-shadow {
  box-shadow:
    3.2px 4.6px 5.2px -0.7px rgba(139, 17, 19, 0.26),
    inset -0.7px 1.4px 1.3px 0 rgba(255, 143, 87, 1);
}

/* Safari-specific fixes for page flip skeleton transitions */
.page-flip-skeleton {
  position: relative;
  width: 100%;
  height: 100%;
}

.page-flip-skeleton--hidden {
  opacity: 0;
  pointer-events: none;
}

.page-flip-skeleton--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Prevent skeleton flash during page flip animations */
.my-page.--flipping .page-flip-skeleton {
  opacity: 0;
  transition: none;
}

/* Ensure skeleton containers don't affect layout */
.my-page .page-flip-skeleton,
.my-page .page-flip-skeleton > * {
  position: static !important;
  transform: none !important;
  transition: none !important;
}