/* wgf-achievement-plaque.css - the in-game Achievement plaque (.wgf-achv).
 *
 * ONE home for "an achievement rendered the way the client shows it": the wide banner with the
 * icon ringed on the left, gold title, description under it, and the points shield on the right.
 * Before this the achievement page was a generic .wgf-seo-hero with stat chips and no icon at all
 * (achievement_one did not even select one), which is the "too much plain" defect on a page that
 * has a very specific in-game look to copy.
 *
 * Used by achievement_app.seo_achievement_page. Criteria render as the client's checklist.
 */

.wgf-achv {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--wgf-metal);
  border-radius: var(--radius-hero);
  background:
    linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)),
    url(/assets/ui/classhall-stone-tile.png) left top / 256px 256px repeat,
    var(--wgf-plate);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .65), 0 8px 28px rgba(0, 0, 0, .45);
}

/* Icon in a gold ring - the client's achievement medallion. */
.wgf-achv__medal {
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(160deg, var(--wgf-gold-bright, #f0c040), var(--wgf-gold-muted));
  box-shadow: 0 0 14px rgba(var(--wgf-gold-rgb), .28);
}

.wgf-achv__icon {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* An achievement whose icon the current build does not resolve still shows a ringed plate, so
   the plaque never collapses into a lopsided banner. */
.wgf-achv__icon--blank {
  background: repeating-linear-gradient(45deg,
    var(--wgf-panel-2) 0 6px, var(--wgf-panel-3) 6px 12px);
}

.wgf-achv__body { flex: 1 1 auto; min-width: 0; }

.wgf-achv__eyebrow {
  margin: 0 0 2px;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wgf-muted);
}

.wgf-achv__title {
  margin: 0;
  font-family: var(--font-game, inherit);
  font-size: 1.5rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--wgf-gold-bright, var(--wgf-gold));
  text-shadow: var(--text-ink-outline);
}

.wgf-achv__desc {
  margin: .35rem 0 0;
  color: var(--wgf-text);
  font-size: .95rem;
  line-height: 1.45;
}

/* Reward line: the client prints the achievement's reward under the description in gold. */
.wgf-achv__reward {
  margin: .4rem 0 0;
  font-size: .88rem;
  color: #ffd100;
}

/* Points shield on the right. */
.wgf-achv__points {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: .5rem .6rem;
  border: 1px solid var(--wgf-gold-muted);
  border-radius: var(--radius-control);
  background: rgba(0, 0, 0, .5);
}

.wgf-achv__points b {
  font-family: var(--font-game, inherit);
  font-size: 1.55rem;
  line-height: 1;
  color: var(--wgf-gold-bright, var(--wgf-gold));
  text-shadow: var(--text-ink-outline);
  font-variant-numeric: tabular-nums;
}

.wgf-achv__points span {
  margin-top: 2px;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wgf-muted);
}

.wgf-achv__flags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: .45rem;
}

.wgf-achv__flag {
  font-size: .74rem;
  color: var(--wgf-muted);
  border: 1px solid var(--wgf-border-neutral);
  border-radius: var(--radius-control);
  padding: .1rem .45rem;
}

/* --- criteria: the client's checklist --------------------------------------------------- */
.wgf-achv-crit { display: flex; flex-direction: column; gap: 1px; }

.wgf-achv-crit__row {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .35rem .6rem;
  background: var(--wgf-panel-1);
  border-bottom: 1px solid rgba(0, 0, 0, .4);
  font-size: .88rem;
}

.wgf-achv-crit__row:last-child { border-bottom: 0; }

/* An empty checkbox, not a tick: this is the catalog page, not a character's progress, so
   claiming anything is "done" here would be a lie. */
.wgf-achv-crit__box {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border: 1px solid var(--wgf-gold-muted);
  border-radius: 2px;
  background: rgba(0, 0, 0, .55);
}

.wgf-achv-crit__txt { min-width: 0; color: var(--wgf-text); overflow-wrap: anywhere; }
.wgf-achv-crit__txt a { color: var(--wgf-gold-link, var(--wgf-gold)); }

@media (max-width: 640px) {
  .wgf-achv { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); }
  .wgf-achv__medal { width: 58px; height: 58px; }
  .wgf-achv__title { font-size: 1.2rem; }
  .wgf-achv__points { order: 3; }
}