/* Your achievements on the Account page (achievements.js): a strip of slots under your numbers and a card for the one
   under the cursor. The camp window's own pieces: notched slots with one picture each, gold only for the cursor; an
   earned slot's ring takes its tier's colour (style.css .tier-*), as its popup's edge does. The Lantern UI: they sit
   in the Account page's fold on the wood, the slots and the card parchment with dark ink. */
.ach-box { display: grid; gap: 10px; padding: 6px 0 4px; text-align: left; }
.ach-box-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ach-box-head h4 { margin: 0; font: 700 1.15rem/1.2 var(--f-label); color: #fff; text-shadow: var(--ol1); }
.ach-box-n { margin: 0; font: 700 1rem/1 var(--f-label); color: var(--ink-dim); }
.ach-box-n b { font: 700 1.25rem/1 var(--f-num); color: #fff; }
.ach-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.ach-tile { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 0; cursor: pointer; clip-path: var(--notch);
  background: var(--parch-tex) 0 0 / 128px, var(--parch); box-shadow: inset 0 0 0 var(--u) var(--parch-edge); }
.ach-tile.got { box-shadow: inset 0 0 0 var(--u) var(--parch-edge), inset 0 0 0 calc(var(--u) * 2.5) var(--tc); }
.ach-tile:hover { background: var(--parch-lit); }
.hub .ach-tile.on, .hub .ach-tile:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--u) var(--parch-edge), inset 0 0 0 calc(var(--u) * 2) var(--gold), inset 0 0 0 calc(var(--u) * 3) var(--parch-edge); }
.ach-tile .ach-badge { width: 32px; height: 32px; }
.ach-tile.locked img, .ach-art.locked img { filter: brightness(0) opacity(0.4); }
.ach-tile.locked svg, .ach-art.locked svg { filter: grayscale(1) brightness(0.45); opacity: 0.6; }
.ach-box-secret { margin: 0; font: 400 0.95rem/1.3 var(--f-text); color: var(--ink-dim); }

.ach-card { padding: 12px; clip-path: var(--notch); background: var(--parch-tex) 0 0 / 128px, var(--parch); box-shadow: inset 0 0 0 var(--u) var(--parch-edge); color: var(--parch-ink); }
.hub .ach-card, .hub .ach-card * { text-shadow: none; }
.ach-card .ach-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; }
.ach-card .ach-art { display: grid; place-items: center; width: 72px; height: 72px; clip-path: var(--notch); background: var(--well, #5f321d);
  box-shadow: inset 0 0 0 var(--u) var(--win-edge), inset 0 0 0 calc(var(--u) * 2.5) var(--tc); }
.ach-card .ach-art.locked { box-shadow: inset 0 0 0 var(--u) var(--win-edge); }
.ach-card .ach-art .ach-badge { width: 54px; height: 54px; }
.ach-card .ach-art svg.ach-badge { width: 46px; height: 46px; }
.ach-card h3 { margin: 2px 0 0; font: 700 1.35rem/1.1 var(--f-label); color: var(--parch-ink); }
.ach-kicker { margin: 0; font: 700 0.875rem/1.2 var(--f-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--parch-ink-dim); }
.ach-desc { margin: 12px 0 0; font: 400 1.05rem/1.5 var(--f-text); color: var(--parch-ink); }
.ach-state { margin: 8px 0 0; font: 700 1rem/1.3 var(--f-label); color: var(--parch-ink-dim); }
.ach-state.got { color: #2f6b1c; }
.ach-state b { font-family: var(--f-num); }
.ach-prog { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; clip-path: var(--notch); background: var(--parch-lit); box-shadow: inset 0 0 0 var(--u) rgba(82, 41, 25, 0.4); }
.ach-prog p { margin: 0; font: 400 1rem/1.4 var(--f-text); color: var(--parch-ink-dim); }
.ach-pips { display: flex; flex-wrap: wrap; gap: 3px; }
.ach-pips i { width: 14px; height: 10px; background: rgba(82, 41, 25, 0.15); box-shadow: inset 0 0 0 1px var(--parch-edge); }
.ach-pips i.on { background: #78b84a; }
.ach-sub { margin: 14px 0 6px; font: 700 0.95rem/1.2 var(--f-label); color: var(--parch-ink-dim); }
.ach-rewards { display: flex; flex-wrap: wrap; gap: 6px; }