.achievement-home-layer {
  position: absolute;
  z-index: 5;
  top: 17%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.achievement-ribbon {
  position: relative;
  min-width: 210px;
  padding: 10px 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff7d6;
  background: #35bfc1;
  border: 4px solid #1d1d1d;
  box-shadow: 5px 5px 0 rgba(29, 29, 29, .28);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 4px;
  animation: achievementRibbonFloat 3.4s ease-in-out infinite;
}

.achievement-ribbon::before,
.achievement-ribbon::after {
  content: '';
  position: absolute;
  top: 8px;
  z-index: -1;
  width: 34px;
  height: 100%;
  background: #249ea5;
  border: 4px solid #1d1d1d;
}
.achievement-ribbon::before { left: -25px; transform: skewY(12deg); }
.achievement-ribbon::after { right: -25px; transform: skewY(-12deg); }
.achievement-ribbon span { color: #ffd93d; font-size: 17px; }

@keyframes achievementRibbonFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

@media (max-width: 560px) {
  .achievement-home-layer { top: 19%; }
  .achievement-ribbon { min-width: 160px; padding: 7px 24px; font-size: 15px; }
}

.achievement-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.achievement-card {
  min-height: 190px;
  padding: 18px;
  background: #fffdf6;
  border: 4px solid #1d1d1d;
  border-radius: 22px;
  box-shadow: 6px 6px 0 #a8c8f0;
}
.achievement-card.is-locked { opacity: .72; filter: grayscale(.2); }
.achievement-card h2 { font-size: 24px; }
.achievement-card p { margin-top: 8px; min-height: 42px; font-size: 13px; font-weight: 800; color: #6f685c; }
.achievement-progress { margin-top: 15px; height: 14px; overflow: hidden; border: 3px solid #1d1d1d; border-radius: 999px; background: #eee9df; }
.achievement-progress i { display: block; height: 100%; background: #39c5bb; }
.achievement-status { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; font-weight: 900; }
.achievement-equip { width: 100%; margin-top: 14px; padding: 10px; border: 3px solid #1d1d1d; border-radius: 999px; background: #ffd93d; font-family: inherit; font-size: 14px; font-weight: 900; cursor: pointer; }
.achievement-equip[disabled] { background: #e6e2da; color: #8f8b82; cursor: default; }