@keyframes pkFadeUp {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pkGlowPulse {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

@keyframes pkShineSweep {
  from {
    transform: translateX(-140%) skewX(-18deg);
  }

  to {
    transform: translateX(240%) skewX(-18deg);
  }
}

.page-enter {
  animation: pkFadeUp var(--pk-speed-slow) ease-out both;
}

.stagger-list > * {
  opacity: 0;
  animation: pkFadeUp var(--pk-speed-slow) ease-out both;
}

.stagger-list > *:nth-child(1) {
  animation-delay: 0.04s;
}

.stagger-list > *:nth-child(2) {
  animation-delay: 0.1s;
}

.stagger-list > *:nth-child(3) {
  animation-delay: 0.16s;
}

.stagger-list > *:nth-child(4) {
  animation-delay: 0.22s;
}

.stagger-list > *:nth-child(5) {
  animation-delay: 0.28s;
}

.card-shine {
  position: relative;
  overflow: hidden;
}

.card-shine::after {
  content: "";

  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -35%;

  width: 28%;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.18),
      transparent
    );

  transform: skewX(-18deg);
  opacity: 0;
}

.card-shine:hover::after {
  opacity: 1;
  animation: pkShineSweep 0.8s ease-out;
}

@keyframes pkPageEnter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.screen {
  opacity: 1;
  transform: translateY(0);

  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

/* .screen.is-switching {
  opacity: 0;
  transform: translateY(4px);
} */

/* @media (prefers-reduced-motion: reduce) {
  .screen.is-entering > *,
  .screen.is-leaving > *,
  .stagger-list > *,
  .card-shine:hover::after {
    animation: none !important;
  }
} */


/* === PokéRank Mobile Patch (safe) === */
@media (max-width:480px){
html,body{width:100%;max-width:100%;overflow-x:hidden;}
body{margin:0;}
.app,.container,#app,main{
  width:100%!important;
  max-width:100%!important;
  min-height:100dvh;
}
header,.header{
  padding:8px 12px!important;
}
.card{
  margin:8px!important;
  padding:10px!important;
}
.bottom-nav,.navbar,.nav-bottom{
  padding:4px 0!important;
}
.bottom-nav .label,.nav-bottom .label{
  font-size:10px;
}
img.avatar,.avatar{
  max-width:56px!important;
  max-height:56px!important;
}
}