/* ─────────────────────────────────────────────────────────────
   ACHIEVEMENT BADGES · hexagon medals for the headline numbers
   ───────────────────────────────────────────────────────────── */
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.ach--gold   { --c1: var(--tone-gold);   --c2: var(--tone-gold-2); }
.ach--rose   { --c1: var(--tone-rose);   --c2: var(--tone-rose-2); }
.ach--violet { --c1: var(--tone-violet); --c2: var(--tone-violet-2); }
.ach--cyan   { --c1: var(--tone-cyan);   --c2: var(--tone-cyan-2); }

.ach-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 18px; justify-items: center; }
.ach { display: grid; justify-items: center; text-align: center; gap: 10px; }
.ach__hex { --hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  position: relative; isolation: isolate; width: clamp(128px, 14vw, 152px); aspect-ratio: 1 / 1.1547; display: grid; place-items: center; align-content: center; gap: 4px; transition: transform .45s cubic-bezier(.3,1.5,.5,1); }
.ach__hex::before { content: ""; position: absolute; inset: 0; z-index: 1; clip-path: var(--hex); background: linear-gradient(160deg, #fff3cf, var(--c1) 30%, var(--c2) 70%, var(--c1)); }
.ach__hex::after { content: ""; position: absolute; inset: 5px; z-index: 2; clip-path: var(--hex);
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--c1) 30%, #2a1460), #120830 72%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.ach__ring { position: absolute; inset: -14px; z-index: 0; clip-path: var(--hex); filter: blur(10px); opacity: .85;
  background: conic-gradient(from var(--spin), transparent 0 55%, var(--c1) 70%, #fff 75%, var(--c1) 80%, transparent 95%); animation: achSpin 4s linear infinite; }
@keyframes achSpin { to { --spin: 360deg; } }
.ach__icon { position: relative; z-index: 3; width: 34px; height: 34px; color: var(--c1); filter: drop-shadow(0 0 8px var(--c1)); }
.ach__icon svg { width: 100%; height: 100%; }
.ach__num { position: relative; z-index: 3; font: 400 clamp(1.7rem, 3vw, 2.15rem)/1 var(--f-display); font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 30%, var(--c1)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 #1c0838); }
.ach__num sup { font-size: .5em; vertical-align: top; margin-left: 2px; }
.ach__tag { font: italic 800 .7rem/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: #fff; padding: 6px 18px;
  background: linear-gradient(90deg, var(--c2), var(--c1), var(--c2)); clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%, 8px 50%); text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.ach__label { font: 600 .82rem/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.ach:hover .ach__hex { transform: translateY(-6px) rotate(-4deg) scale(1.04); }
.ach:hover .ach__ring { animation-duration: 1.2s; }