/* Saavutukset — postileimamaiset merkit matkapassissa (js/achievements.js) */
.ach { --ach-gold: #c4932b; display: grid; gap: 14px; }

.ach-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.ach-sum { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .04em; white-space: nowrap; }
.ach-sum b { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin-right: 2px; }
.ach-sumbar { height: 8px; border-radius: 99px; background: var(--paper-2); border: 1.5px solid var(--ink); overflow: hidden; }
.ach-sumbar span { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--virtual) 0 6px, #ea8b57 6px 12px); transition: width .5s cubic-bezier(.2, .8, .2, 1); }

.ach-grid { list-style: none; margin: 0; padding: 0 4px 4px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

.ach-card {
  --c: var(--ach-gold);
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 12px 12px 12px; border-radius: 12px; background: #fffdf8;
  border: 2px solid var(--line); transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ach-real { --c: var(--real); }
.ach-virtual { --c: var(--virtual); }
.ach-any { --c: var(--ach-gold); }

.ach-done { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.ach-done:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }

.ach-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 9px; }

/* Merkki: kaksoisrengas kuin postileimassa */
.ach-badge {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  color: var(--c); border: 2.5px solid currentColor; outline: 1.5px dashed currentColor; outline-offset: -7px;
  background: color-mix(in srgb, var(--c) 12%, #fffdf8);
}
.ach-done .ach-badge { transform: rotate(-8deg); }
.ach-done:nth-child(3n + 2) .ach-badge { transform: rotate(6deg); }
.ach-done:nth-child(3n) .ach-badge { transform: rotate(-3deg); }
.ach-svg { width: 20px; height: 20px; display: block; }

.ach-locked { background: var(--paper); }
.ach-locked .ach-badge { color: var(--none); background: var(--paper-2); outline-color: var(--line); }
.ach-lock {
  position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper); border: 1.5px solid var(--line); color: var(--muted);
}
.ach-lock .ach-svg { width: 11px; height: 11px; stroke-width: 2.5; }

.ach-count {
  font-size: 11px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
  padding: 3px 7px; border-radius: 99px; background: var(--paper-2);
}
.ach-done .ach-count {
  color: #fff; background: var(--c); text-transform: uppercase; letter-spacing: .1em; font-size: 9px; padding: 4px 7px;
}

.ach-title {
  margin: 0 0 3px; font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1.12;
  letter-spacing: -.01em; font-variation-settings: 'opsz' 72; color: var(--ink);
  overflow-wrap: anywhere; hyphens: auto;
}
.ach-locked .ach-title { color: var(--ink-2); }
.ach-desc { margin: 0 0 10px; font-size: 11.5px; line-height: 1.38; color: var(--muted); flex: 1; }

.ach-bar { height: 6px; border-radius: 99px; background: var(--paper-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.ach-bar span { display: block; height: 100%; border-radius: inherit; background: var(--c); opacity: .6; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.ach-done .ach-bar { box-shadow: none; }
.ach-done .ach-bar span { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ach-card, .ach-bar span, .ach-sumbar span { transition: none; }
}