.achievement-section {
  scroll-margin-top: 20px;
  margin: 0 0 32px;
  padding: clamp(16px, 3vw, 31px);
  border: 1px solid #475d984f;
  border-radius: 22px;
  color: #f5f8ff;
  background:
    radial-gradient(ellipse at 83% 4%, #3656a27a, transparent 56%),
    linear-gradient(135deg, #111c42, #1a2d5c);
  box-shadow: 0 14px 35px #233e741f;
}

.achievement-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-bottom: 16px;
}
.achievement-heading h2 {
  margin: 0;
  font-size: clamp(1.27rem, 3vw, 2rem);
  line-height: 1.18;
  font-weight: 850;
  letter-spacing: -.025em;
}
.achievement-count {
  flex-shrink: 0;
  padding: 6px 10px;
  border: 1px solid #a6b9fb58;
  border-radius: 999px;
  background: #b8ccff15;
  color: #f1f5ff;
  font-size: .74rem;
  font-weight: 750;
}
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(9px, 1.6vw, 15px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.achievement-card {
  --badge-accent: #9fddff;
  --badge-glow: #43b6ff6b;
  --badge-tint: #3f9eff3e;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  padding: 14px;
  border: 1px solid #b4c5f237;
  border-radius: 15px;
  background: linear-gradient(150deg, #3144728c, #192747c7);
  text-align: center;
  transition: background .22s, box-shadow .22s, border-color .22s;
}
.achievement-card[data-achievement="speaking"] {
  --badge-accent: #e1beff;
  --badge-glow: #ca81ff75;
  --badge-tint: #a46bff3d;
}
.achievement-card[data-achievement="englishverse"] {
  --badge-accent: #ffe5a0;
  --badge-glow: #ffd16e6f;
  --badge-tint: #ffcc6542;
}
.achievement-card[data-state="unlocked"] {
  border-color: var(--badge-glow);
  background: radial-gradient(ellipse at 50% 15%, var(--badge-tint), transparent 73%), linear-gradient(150deg, #2a3d68, #1d2c4e);
  box-shadow: inset 0 1px 0 #fff2, 0 0 18px var(--badge-tint);
}
.achievement-art {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 117px;
  margin: 0 0 8px;
}
.achievement-art::before {
  position: absolute;
  z-index: -1;
  width: min(80%, 158px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--badge-glow), transparent 68%);
}
.achievement-art::after {
  position: absolute;
  top: 8%;
  left: calc(50% + 55px);
  color: var(--badge-accent);
  font-size: 1.13rem;
  text-shadow: 0 0 10px var(--badge-glow);
}
.achievement-card[data-state="unlocked"] .achievement-art::before { content: ""; }
.achievement-card[data-state="unlocked"] .achievement-art::after { content: "✦"; }
.achievement-art img {
  width: min(91%, 148px);
  height: auto;
  max-height: 112px;
  object-fit: contain;
  transition: filter .26s, opacity .26s, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.achievement-card[data-state="locked"] .achievement-art img { filter: grayscale(1); opacity: .4; }
.achievement-card[data-state="unlocked"] .achievement-art img { filter: drop-shadow(0 0 13px var(--badge-glow)); opacity: 1; }
.achievement-details { display: flex; min-width: 0; flex-direction: column; align-items: center; }
.achievement-details h3 { margin: 0 0 5px; font-size: clamp(.99rem, 2vw, 1.19rem); font-weight: 850; overflow-wrap: anywhere; }
.achievement-details p { margin: 0 0 11px; color: #d9e3fa; font-size: .79rem; line-height: 1.55; }
.achievement-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding: 5px 9px;
  border: 1px solid #ccd8ff3d;
  border-radius: 999px;
  background: #07143356;
  color: #e5ecff;
  font-size: .7rem;
  line-height: 1.2;
  font-weight: 800;
}
.achievement-card[data-state="unlocked"] .achievement-status {
  border-color: var(--badge-glow);
  background: var(--badge-tint);
  color: var(--badge-accent);
}

.achievement-toast {
  position: fixed;
  z-index: 8;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: min(390px, calc(100vw - 32px));
  padding: 9px 13px;
  border: 1px solid #ffe291aa;
  border-radius: 14px;
  background: linear-gradient(130deg, #243f72, #182650);
  color: #fff;
  box-shadow: 0 8px 25px #07163265, 0 0 18px #ffc46a33;
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  pointer-events: none;
  transition: opacity .2s, visibility .2s, translate .25s cubic-bezier(.22, 1, .36, 1);
}
.achievement-toast.show { opacity: 1; visibility: visible; translate: 0 0; }
.achievement-toast img { flex: 0 0 58px; object-fit: contain; }
.achievement-toast strong, .achievement-toast div span { display: block; overflow-wrap: anywhere; }
.achievement-toast strong { font-size: .77rem; color: #f4f6ff; line-height: 1.25; }
.achievement-toast div span { margin-top: 3px; font-size: .9rem; color: #ffe49f; font-weight: 850; line-height: 1.32; }
.achievement-confetti { position: absolute; left: 41%; top: 41%; }
.achievement-confetti i {
  position: absolute;
  width: 5px;
  height: 8px;
  border-radius: 1px;
  animation: achievement-confetti .85s ease-out var(--confetti-delay) both;
}

@keyframes achievement-confetti {
  0% { opacity: 0; scale: .5; }
  16% { opacity: 1; }
  100% { opacity: 0; translate: var(--confetti-x) var(--confetti-y); rotate: var(--confetti-angle); }
}
@keyframes achievement-twinkle {
  50% { opacity: .46; scale: .8; }
}
@keyframes achievement-glow {
  50% { opacity: .6; scale: .94; }
}
@media (prefers-reduced-motion: no-preference) {
  :root:not(.motion-off) .achievement-card[data-state="unlocked"] .achievement-art::after { animation: achievement-twinkle 3.2s ease-in-out infinite; }
  :root:not(.motion-off) .achievement-card[data-state="unlocked"] .achievement-art::before { animation: achievement-glow 3.2s ease-in-out infinite; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root:not(.motion-off) .achievement-card[data-state="unlocked"]:hover img { transform: scale(1.08); }
  :root:not(.motion-off) .achievement-card[data-state="unlocked"]:hover { box-shadow: inset 0 1px 0 #fff3, 0 0 24px var(--badge-glow); }
}
@media (prefers-reduced-motion: reduce) {
  .achievement-card, .achievement-art img, .achievement-toast { transition: none; }
}
@media (max-width: 690px) {
  .achievement-grid { grid-template-columns: 1fr; }
  .achievement-card { grid-template: auto / minmax(56px, 100px) minmax(0, 1fr); align-items: center; gap: 9px; padding: 10px; text-align: left; }
  .achievement-art { height: 82px; margin: 0; }
  .achievement-art::after { left: auto; right: 0; font-size: .88rem; }
  .achievement-art img { width: 100%; max-height: 82px; }
  .achievement-details { align-items: start; }
  .achievement-details p { margin-bottom: 7px; }
}