.perk-comment {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: block !important;
  transition: opacity 0.15s ease, visibility 0.15s ease !important;
}


@media (hover: hover) and (pointer: fine) {
  .perk:hover .perk-comment,
  .perk:focus .perk-comment {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


@media (hover: none) and (pointer: coarse) {
  .perk-comment {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  .perk:hover .perk-comment,
  .perk:focus .perk-comment,
  .perk:active .perk-comment {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}


* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.perk,
.perk img,
.tier-content,
.modal,
.modal-content,
.perk-comment,
.advice-box,
.combo-modal,
.settings-modal,
button,
.killer-icon,
.tier-box {
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}


.perk {
  will-change: transform;
  transition: transform 0.2s ease;
}

.perk img {
  will-change: transform;
}


.tier-content {
  will-change: transform;
  contain: layout style;
  transition: transform 0.2s ease;
}

.tier-content:hover {
  transform: translateY(-1px) translateZ(0) !important;
}


.modal {
  will-change: opacity;
  transition: opacity 0.3s ease;
}

.modal-content {
  will-change: transform;
}


button,
.button {
  will-change: transform;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

button:hover,
.button:hover {
  transform: scale(1.02) translateZ(0) !important;
}


@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


@media (hover: none) and (pointer: coarse) {
  .perk {
    -webkit-tap-highlight-color: rgba(0, 208, 255, 0.3);
  }
  
  .perk img {
    transition: transform 0.1s ease;
  }
  
  .perk:active img {
    transform: scale(0.95) translateZ(0) !important;
  }
}


* {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}


.tierlist,
.tier-row,
.tier-content,
.modal-content,
.perk-comment {
  contain: layout style paint;
}