/* © 2026 MEK.txt. All rights reserved. Part of the MEK design system; not licensed for reuse. */
/* MEK design system · part: achievements
   The game kit's achievements: a toast that pops up when one is earned (a badge, "Achievement unlocked", its name,
   what it was for, the points), with an accent glint sweeping across it once; and the list of them all, earned and
   still locked. Opt-in: link it after mek.css, with js/achieve.js:
     mekAchieve.unlock({ name: "Into the dark", text: "Reach depth 7.", points: 50 });
     mekAchieve.unlock({ id: "deep" });   // the one in a list: it's earned there too, and the toast reads it
   Needs the core alert and toast (the stack, the timing). In the mek.parts layer, so a project's CSS wins. */

@layer mek.parts {

/* ---------- Dials ---------- */
/* on every themed area too, so a box in another theme works these out from its own colours */
:root, [data-theme] {
  --ach-edge: var(--accent);           /* the toast's edge, and an earned badge's icon */
  --ach-label: var(--accent);          /* "Achievement unlocked" */
  --ach-badge: var(--line);            /* the badge's frame: 400 */
  --ach-locked: var(--line);           /* a locked one's badge and points: 400 */
  --ach-points-font: var(--font-blackletter);   /* the points: MEKZANTINE, at 36 (its 18px grid) */
  --ach-time: 6000ms;                  /* how long the toast stays (longer than a note: it's a moment) */
  --ach-glint-band: 48px;              /* the shimmer: a band this wide, leaning at 45° (/), an 8×8 Bayer dither, densest in the middle */
  --ach-glint-peak: .75;               /* how dense its middle is (1: solid) */
  --ach-glint-step: 24px;              /* how far it jumps a frame: a multiple of 8, so the dither stays on the grid */
  --ach-glint-fps: 24;                 /* frames a second: film-rate, not the display's, so it reads retro */
}

/* ---------- Card ----------
   <li class="ach" data-ach="deep"><span class="ach-badge"><svg class="icon x2">…star</svg></span>
     <span class="ach-text"><span class="ach-name">Into the dark</span><span class="ach-desc">Reach depth 7.</span></span>
     <span class="ach-points">50</span></li>
   The badge: a 48px square, its frame 1px in 400 with stepped corners, the icon in the middle at .x2 (30px) in the
   accent. Beside it the name in 16, 1000, and what it was for in 14, 700, 8px apart; at the right the points in MEKZANTINE
   36 (--ach-points-font), 900.
   .locked: the icon and the points in 400, the name in 700; nothing else changes, so earning one moves nothing.
   A progress.meter after the description shows how far along a locked one is; earned, it fills. */
.ach { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.ach-badge { position: relative; display: grid; place-items: center; width: 48px; height: 48px; color: var(--ach-edge);
  background: linear-gradient(var(--ach-badge), var(--ach-badge)) 2px 0 / 44px 1px no-repeat,
              linear-gradient(var(--ach-badge), var(--ach-badge)) 2px 100% / 44px 1px no-repeat,
              linear-gradient(var(--ach-badge), var(--ach-badge)) 0 2px / 1px 44px no-repeat,
              linear-gradient(var(--ach-badge), var(--ach-badge)) 100% 2px / 1px 44px no-repeat,
              linear-gradient(var(--ach-badge), var(--ach-badge)) 1px 1px / 1px 1px no-repeat,
              linear-gradient(var(--ach-badge), var(--ach-badge)) calc(100% - 1px) 1px / 1px 1px no-repeat,
              linear-gradient(var(--ach-badge), var(--ach-badge)) 1px calc(100% - 1px) / 1px 1px no-repeat,
              linear-gradient(var(--ach-badge), var(--ach-badge)) calc(100% - 1px) calc(100% - 1px) / 1px 1px no-repeat; }
.ach-text { display: grid; gap: var(--space-2); min-width: 0; }   /* 8px between the label, the name and what it was for */
.ach-label { font: var(--text-crisp)/1 var(--font-mono); color: var(--ach-label); }
.ach-name { font-size: var(--text-md); line-height: 20px; color: var(--text-strong); }
.ach-desc { font-size: var(--text-sm); line-height: 18px; color: var(--text-muted); }
.ach-text > .meter { margin-top: var(--space-1); }
.ach-points { font: var(--text-xl)/1 var(--ach-points-font); color: var(--text); -webkit-font-smoothing: none; }
.ach.locked .ach-badge, .ach.locked .ach-points { color: var(--ach-locked); }
.ach.locked .ach-name { color: var(--text-muted); }
.ach.new { animation: mek-blink var(--dur-beat) steps(1, end) 4; }

/* ---------- List ----------
   <ul class="achs" aria-label="Achievements"> of li.ach, each 12px above and below on a 1px rule in 400, 560px at most. */
.achs { display: grid; max-width: 560px; margin: 0; padding: 0; list-style: none; }
.achs > .ach { padding: var(--space-3) 0; border-top: var(--stroke) solid var(--line); }
.achs > .ach:last-child { border-bottom: var(--stroke) solid var(--line); }

/* ---------- Toast ----------
   mekAchieve.unlock() puts a card in a core toast: the accent edge, "Achievement unlocked" over the name, "+50".
   It stays --ach-time (6s), held by the pointer or focus, and closes like any toast. As it arrives, a shimmer sweeps
   across it once: a --ach-glint-band (48px) band of accent leaning at 45° (/), drawn as an 8×8 Bayer dither, densest in the middle
   (--ach-glint-peak) and thinning to nothing at its edges, jumping --ach-glint-step (24px) a frame at
   --ach-glint-fps (24): about 0.7s across, on whole pixels, the dither on the 8px grid. js/achieve.js draws the band
   once and sets its steps; not under reduced motion. */
.toast.ach-toast { --alert-edge: var(--ach-edge); overflow: hidden; }
.ach-toast .ach-points { color: var(--ach-edge); }
.ach-glint { position: absolute; inset: 1px; pointer-events: none; background: var(--ach-edge);
  -webkit-mask: var(--ach-glint-mask, linear-gradient(transparent, transparent)) calc(-1 * var(--ach-glint-w, 100%)) 0 / var(--ach-glint-w, 100%) 100% no-repeat;
          mask: var(--ach-glint-mask, linear-gradient(transparent, transparent)) calc(-1 * var(--ach-glint-w, 100%)) 0 / var(--ach-glint-w, 100%) 100% no-repeat;
  animation: mek-ach-glint var(--ach-sweep, .7s) steps(var(--ach-steps, 17), end) var(--dur-beat) 1 both; }
@keyframes mek-ach-glint {
  from { -webkit-mask-position: calc(-1 * var(--ach-glint-w, 100%)) 0; mask-position: calc(-1 * var(--ach-glint-w, 100%)) 0; }
  to { -webkit-mask-position: var(--ach-to, 360px) 0; mask-position: var(--ach-to, 360px) 0; }
}


}