/* ==========================================================================
   pages/achievements.css: All achievements (/achievements)
   Owner: the achievements page builder. The .ach-tile is also drawn by the
   profile's ACHIEVEMENTS grid, so the tile rules are scoped to both pages.
   ========================================================================== */

/* ---- the tile (profile grid + this page) --------------------------------- */
.pg-achievements .ach-grid, .pg-profile .ach-grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pg-achievements .ach-tile, .pg-profile .ach-tile {
  --ach-c: var(--text-muted);
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 16px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: #15161A;
  color: var(--text-muted);
}
.pg-achievements .ach-tile.is-on, .pg-profile .ach-tile.is-on {
  border-color: rgba(var(--mode-rgb), .62); background: linear-gradient(180deg, rgba(var(--mode-rgb), .05), transparent), var(--surface);
  color: var(--text);
}
.ach-tile[data-tone="violet"] { --ach-c: #D8CCFF; }
.ach-tile[data-tone="orange"] { --ach-c: #FF6B2C; }
.ach-tile[data-tone="gold"]   { --ach-c: #F4B63F; }
.ach-tile[data-tone="steel"]  { --ach-c: #B9A3F2; }
.ach-tile[data-tone="green"]  { --ach-c: #22C55E; }
.ach-tile[data-tone="blue"]   { --ach-c: #3B82F6; }

.ach-tile .ach-ic { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; color: #4B4D55; }
.ach-tile .ach-ic .i { width: 34px; height: 34px; }
.ach-tile.is-on .ach-ic { color: var(--ach-c); --dice-pip: #5B4A9E; }
.ach-tile.is-on .ach-ic .i { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
/* The check and the swap sit on a filled square in the concept. */
.ach-tile[data-tone="green"] .ach-ic, .ach-tile[data-tone="blue"] .ach-ic { border-radius: 6px; background: #26272D; color: #55575F; }
.ach-tile[data-tone="green"] .ach-ic .i, .ach-tile[data-tone="blue"] .ach-ic .i { width: 24px; height: 24px; }
.ach-tile.is-on[data-tone="green"] .ach-ic, .ach-tile.is-on[data-tone="blue"] .ach-ic { background: var(--ach-c); color: #fff; }

.ach-tile .ach-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ach-tile .ach-name { font: 600 var(--fs-md)/1.2 var(--font-ui); color: inherit; }
.ach-tile .ach-desc { font-size: var(--fs-sm); line-height: 1.35; color: var(--text-muted); }
.ach-tile.is-on .ach-desc { color: var(--text-2); }

@media (max-width: 1000px) {
  .pg-achievements .ach-grid, .pg-profile .ach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .pg-achievements .ach-tile, .pg-profile .ach-tile { gap: 10px; padding: 10px 12px; min-height: 64px; }
  .ach-tile .ach-ic { flex-basis: 30px; width: 30px; height: 30px; }
  .ach-tile .ach-ic .i { width: 28px; height: 28px; }
  .ach-tile .ach-name { font-size: var(--fs-sm); }
  .ach-tile .ach-desc { font-size: 12px; }
}

/* ---- /achievements ------------------------------------------------------- */
.pg-achievements .ach-back { display: inline-flex; align-items: center; gap: 6px; margin: var(--s-2) 0 var(--s-5); }
.pg-achievements .ach-back .i { width: 14px; height: 14px; }
.pg-achievements .ach-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
.pg-achievements .ach-head .page-title { margin: 0; }
.pg-achievements .ach-head .page-sub { margin: 8px 0 0; }
.pg-achievements .ach-count { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 8px; min-width: 160px; }
.pg-achievements .ach-count-n { font: 700 48px/1 var(--font-display); color: var(--mode-primary); }
.pg-achievements .ach-count-of { font: 500 var(--fs-xs)/1 var(--font-label); letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--text-2); }
.pg-achievements .ach-meter { grid-column: 1 / -1; display: block; height: 6px; margin-top: 10px; border-radius: 99px; background: var(--border); overflow: hidden; }
.pg-achievements .ach-meter i { display: block; height: 100%; border-radius: inherit; background: var(--mode-gradient); }
.pg-achievements .ach-sec { margin: var(--s-7) 0 var(--s-3); }
.pg-achievements .ach-grid.is-full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-achievements .ach-grid.is-full .ach-tile { align-items: flex-start; padding: 16px; }
.pg-achievements .ach-how { margin-top: 6px; font-size: var(--fs-sm); line-height: 1.4; color: var(--text-2); }
.pg-achievements .ach-tile:not(.is-on) .ach-how { color: #8B8E97; }
.pg-achievements .ach-prog {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  font: 500 var(--fs-xs)/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
}
.pg-achievements .ach-tile.is-on .ach-prog { color: var(--mode-highlight); }
.pg-achievements .ach-prog .i { width: 13px; height: 13px; }
.pg-achievements .ach-foot { margin: var(--s-6) 0 0; font-size: var(--fs-sm); color: var(--text-2); }
.pg-achievements .ach-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--s-5) 0 var(--s-8); }
@media (max-width: 640px) {
  .pg-achievements .ach-grid.is-full { grid-template-columns: 1fr; }
}