/* Rift Table — achievements (achievements.js; docs/design.md "Achievements"). Same tokens as style.css: the four
   rarity colours are --ach-<rarity> / --ach-<rarity>-deep (light / deep, like the league crests of ranking.css). */

/* ---------------------------------------------------------------- emblems (inline SVG, achievements.js emblem())
   A rarity frame (.o: deep fill, light rim; .ri a faint inner ring, .g a small gloss) around the achievement's own
   symbol (.y, a 24 x 24 drawing scaled into the frame): ink strokes (--ach-*-ink), .f ink fills, .a tinted fills (the
   rarity colour over the deep fill, opaque), .d deep fills that hide what is behind, .t thin strokes, .lg the league
   colour (Climber, from ranking.css .rk-*), .dm the six domain colours (Six Paths). .p tier pips, .pl/.pn a numeral
   beyond 5. .ach-gen: no symbol for this key (a future achievement): the rarity's gem (.i). */
.ach-em{--a1:var(--ach-common);--a2:var(--ach-common-deep);--ai:var(--ach-common-ink);display:inline-flex;flex:0 0 auto;width:28px;height:28px}
.ach-em svg{width:100%;height:100%;overflow:visible}
.ach-em .o{fill:var(--a2);stroke:var(--a1);stroke-width:1.5;stroke-linejoin:round}
.ach-em .ri{fill:none;stroke:var(--a1);stroke-width:.6;opacity:.32}
.ach-em .i{fill:var(--a1)}
.ach-em .g{stroke:var(--ai);stroke-width:1.1;stroke-linecap:round;fill:none;opacity:.4}
.ach-em .y{fill:none;stroke:var(--ai);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ach-em .y .f{fill:var(--ai);stroke:none}
.ach-em .y .a{fill:var(--a2);fill:color-mix(in srgb,var(--a1) 48%,var(--a2))}
.ach-em .y .d{fill:var(--a2)}
.ach-em .y .t{stroke-width:1.3}
.ach-em .y .lg{fill:var(--t1,var(--a1))}
.ach-em .y .dm{stroke:var(--a2);stroke-width:1.2}
.ach-em .dm-fury{fill:var(--fury)} .ach-em .dm-calm{fill:var(--calm)} .ach-em .dm-mind{fill:var(--mind)}
.ach-em .dm-body{fill:var(--body)} .ach-em .dm-chaos{fill:var(--chaos)} .ach-em .dm-order{fill:var(--order)}
.ach-em .p{fill:var(--ai);stroke:var(--a2);stroke-width:1;stroke-linejoin:round}
.ach-em .pl{fill:var(--a2);stroke:var(--a1);stroke-width:.8}
.ach-em .pn{fill:var(--ai);font:700 5px/1 var(--ui);text-anchor:middle}
.ach-rare{--a1:var(--ach-rare);--a2:var(--ach-rare-deep);--ai:var(--ach-rare-ink)}
.ach-epic{--a1:var(--ach-epic);--a2:var(--ach-epic-deep);--ai:var(--ach-epic-ink)}
.ach-legendary{--a1:var(--ach-legendary);--a2:var(--ach-legendary-deep);--ai:var(--ach-legendary-ink)}
.ach-em.ach-sm{width:34px;height:34px}
.ach-em.ach-md{width:40px;height:40px}
.ach-em.ach-lg{width:68px;height:68px}
.ach-em.ach-sm .y,.ach-em.ach-md .y{stroke-width:2.3}  /* a touch heavier when small */
.ach-legendary svg{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--ach-legendary) 30%,transparent))}
.ach-legendary.ach-lg svg{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--ach-legendary) 40%,transparent))}
.ach-r{font-weight:600}
.ach-r-common{color:var(--ach-common)} .ach-r-rare{color:var(--ach-rare)}
.ach-r-epic{color:var(--ach-epic)} .ach-r-legendary{color:var(--ach-legendary)}

/* ---------------------------------------------------------------- profile panel */
.ach-panel .ptitle .cnt b{color:var(--gold-hi);font-weight:600}
.ach-panel > .ach-show,.ach-panel > .ach-list,.ach-panel > .ach-hint,.ach-panel > .none{margin-left:var(--s4);margin-right:var(--s4)}
.ach-panel > :last-child{margin-bottom:var(--s4)}
.ach-panel > .none{padding:0;color:var(--ink-3)}
.ach-show{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s3);margin-top:var(--s1);margin-bottom:var(--s4)}
.ach-show-c{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;min-width:0;padding:var(--s4) var(--s3);
  border:1px solid var(--hair-2);border-radius:var(--r-lg);background:radial-gradient(180px 90px at 50% 0%,rgba(212,178,106,.07),transparent 70%),var(--mat)}
.ach-show-c b{font:600 var(--fs-4)/1.15 var(--display);color:var(--ink);overflow-wrap:anywhere}
.ach-show-c small{color:var(--ink-2);font-size:var(--fs-1);line-height:1.4}
.ach-show-c .ach-r{font-size:var(--fs-1)}
.ach-show-c .ach-pct{color:var(--ink-3);font-size:var(--fs-1);margin-top:-4px}
.ach-hint{margin:0 0 var(--s2);color:var(--ink-3);font-size:var(--fs-1)}
.ach-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s2)}
.ach-item{position:relative;display:flex;align-items:flex-start;gap:var(--s3);min-width:0;padding:var(--s3);border:1px solid var(--hair);
  border-radius:var(--r-lg);background:var(--surface-2)}
.ach-item.own{display:block;padding:0}
.ach-pick{display:flex;align-items:flex-start;gap:var(--s3);width:100%;min-width:0;padding:var(--s3);border:0;border-radius:var(--r-lg);
  background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ach-pick:hover{background:rgba(233,223,198,.03)}
.ach-item.open{border-color:var(--hair-3)}
.ach-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.ach-name{font:600 var(--fs-3)/1.25 var(--display);font-size:18px;color:var(--ink);overflow-wrap:anywhere}
.ach-desc{color:var(--ink-2);font-size:var(--fs-1);line-height:1.4}
.ach-meta{display:flex;flex-wrap:wrap;gap:2px var(--s3);color:var(--ink-3);font-size:var(--fs-1);margin-top:2px}
.ach-nrow{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--s2);min-width:0}
.ach-flag{display:inline-block;font:600 var(--fs-0)/1.4 var(--ui);font-style:normal;letter-spacing:.06em;text-transform:uppercase;
  color:var(--on-gold);background:var(--gold);border-radius:4px;padding:0 6px;margin:2px 0}
.ach-rv{position:absolute;top:var(--s3);right:var(--s3);font-size:var(--fs-1);color:var(--gold-hi);text-decoration:none;
  border:1px solid var(--hair-2);border-radius:999px;padding:1px 10px}
.ach-rv:hover{border-color:var(--gold)}
.ach-item:has(.ach-rv) .ach-nrow{padding-right:68px}  /* room for the Review chip on the name's row only */
.ach-acts{display:flex;flex-wrap:wrap;gap:var(--s2);padding:0 var(--s3) var(--s3) calc(var(--s3) + 40px + var(--s3))}
.ach-acts .hbtn.on{border-color:var(--gold);color:var(--gold-hi)}

/* the chosen title, under the name (profile) and on the ladder (desktop row; phones show it in the sub-line) */
.pf-title{font:700 var(--fs-3)/1.2 var(--sc);letter-spacing:.06em;color:var(--gold-hi)}
.pf-title[hidden]{display:none}
.rk-ttl{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:italic 500 var(--fs-1)/1.3 var(--ui);color:var(--gold)}

/* ---------------------------------------------------------------- end-of-game panel */
.ach-win{display:flex;flex-direction:column;gap:var(--s2);margin:var(--s3) auto 0;max-width:420px;text-align:left}
.ach-win[hidden]{display:none}
.ach-line{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);border:1px solid var(--hair-2);border-left:3px solid var(--a1, var(--gold));
  border-radius:var(--r);background:var(--mat);animation:ach-in .5s ease-out both}
.ach-line-common{--a1:var(--ach-common)} .ach-line-rare{--a1:var(--ach-rare)}
.ach-line-epic{--a1:var(--ach-epic)} .ach-line-legendary{--a1:var(--ach-legendary)}
.ach-line > span:not(.ach-em){display:flex;flex-direction:column;min-width:0}
.ach-line small{font:700 var(--fs-1)/1.3 var(--sc);letter-spacing:.08em;color:var(--ink-2)}
.ach-line b{font:600 18px/1.2 var(--display);color:var(--ink)}
.ach-line em{font-style:normal;color:var(--ink-2);font-size:var(--fs-1);line-height:1.35}
.ach-line:nth-child(2){animation-delay:.12s} .ach-line:nth-child(3){animation-delay:.24s}
@keyframes ach-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.ach-line{animation:none}}

@media (max-width: 720px){
  .rk-ttl{display:none}
  .ach-list{grid-template-columns:minmax(0,1fr)}
  .ach-show{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
  .ach-show-c{padding:var(--s3) var(--s2)}
  .ach-show-c b{font-size:var(--fs-3)}
  .ach-show-c .ach-sdesc{display:none}
  .ach-em.ach-lg{width:54px;height:54px}
  .ach-acts{padding-left:var(--s3)}
  .ach-panel > .ach-show,.ach-panel > .ach-list,.ach-panel > .ach-hint,.ach-panel > .none{margin-left:var(--s3);margin-right:var(--s3)}
  .ach-panel > :last-child{margin-bottom:var(--s3)}
}