/* Achievements — latest-highest photocards, per-artist tabs.
   Loaded after the main stylesheet. Surfaces, text, radius and borders come
   from the system tokens (--theme-card-bg, --color-*, rounded-2xl = 1rem);
   only the per-artist accent set below is new. */

/* ---- Per-artist accent sets: accent + second colour, tied to system neutrals ---- */
[data-artist="all"]{
  --ach-accent:var(--theme-accent,#59B292);--ach-accent-2:var(--theme-accent-strong,#7FCBAE);
  --ach-soft:var(--theme-accent-soft,rgba(89,178,146,.15));
  --ach-border:var(--theme-accent-border,rgba(89,178,146,.4));
  --ach-glow:rgba(89,178,146,.35);--ach-on:#0B0A12;
}
[data-artist="blackpink"]{ /* hot pink + black */
  --ach-accent:#FF2E93;--ach-accent-2:#0A0A0C;
  --ach-soft:rgba(255,46,147,.16);--ach-border:rgba(255,46,147,.6);--ach-glow:rgba(255,46,147,.42);--ach-on:#0A0A0C;
}
[data-artist="lisa"]{ /* electric lime + black */
  --ach-accent:#C6FF00;--ach-accent-2:#0A0A0C;
  --ach-soft:rgba(198,255,0,.14);--ach-border:rgba(198,255,0,.55);--ach-glow:rgba(198,255,0,.38);--ach-on:#0A0A0C;
}
[data-artist="rose"]{ /* soft gold + blush */
  --ach-accent:#E6C27A;--ach-accent-2:#F4CFCF;
  --ach-soft:rgba(230,194,122,.16);--ach-border:rgba(230,194,122,.58);--ach-glow:rgba(244,207,207,.36);--ach-on:#2A1E10;
}
[data-artist="jennie"]{ /* red + ivory */
  --ach-accent:#E5252E;--ach-accent-2:#F6F0E2;
  --ach-soft:rgba(229,37,46,.16);--ach-border:rgba(229,37,46,.62);--ach-glow:rgba(229,37,46,.42);--ach-on:#FFF8EA;
}
[data-artist="jisoo"]{ /* deep blue + silver */
  --ach-accent:#3A5BE0;--ach-accent-2:#C9CFDA;
  --ach-soft:rgba(58,91,224,.18);--ach-border:rgba(78,110,240,.7);--ach-glow:rgba(58,91,224,.45);--ach-on:#F2F4F8;
}
/* Light theme: keep the same hues but readable on a white surface */
.light [data-artist="lisa"]{--ach-accent:#86B300;--ach-accent-2:#14140F;--ach-soft:rgba(134,179,0,.14);--ach-border:rgba(134,179,0,.6);--ach-glow:rgba(134,179,0,.3);--ach-on:#0A0A0C}
.light [data-artist="rose"]{--ach-accent:#B8892F;--ach-accent-2:#E9B5B5;--ach-soft:rgba(184,137,47,.14);--ach-border:rgba(184,137,47,.6);--ach-glow:rgba(233,181,181,.5);--ach-on:#FFF8EA}
.light [data-artist="jennie"]{--ach-accent-2:#D9CDB0}
.light [data-artist="jisoo"]{--ach-accent:#2340C0;--ach-accent-2:#A9B0BE;--ach-border:rgba(35,64,192,.6);--ach-glow:rgba(35,64,192,.3)}
.light [data-artist="blackpink"]{--ach-accent-2:#1A1A1F}

/* Blend each accent border into the system border neutral where supported */
@supports (color:color-mix(in srgb,red,blue)){
  .ach-card{border-color:color-mix(in srgb,var(--ach-accent) 62%,rgb(var(--color-ink-border)))}
  .ach-card:hover,.ach-card:focus-visible{border-color:var(--ach-accent)}
}

/* ---- Tabs ---- */
.ach-tabs{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem .25rem .75rem;margin:0 -.25rem 1rem;scrollbar-width:none}
.ach-tabs::-webkit-scrollbar{display:none}
.ach-tab{flex:none;padding:.5rem 1rem;border-radius:9999px;font-size:.875rem;font-weight:500;line-height:1.25;
  color:rgb(var(--color-mist));background:transparent;border:1px solid rgb(var(--color-ink-border)/.7);
  transition:color .16s ease,border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
.ach-tab:hover{color:rgb(var(--color-fg));border-color:var(--ach-border)}
.ach-tab[aria-selected="true"]{color:rgb(var(--color-fg));background:var(--ach-soft);border-color:var(--ach-accent);
  box-shadow:0 0 0 1px var(--ach-accent),0 0 14px -2px var(--ach-glow)}
.ach-tab:focus-visible,.ach-card:focus-visible,.ach-close:focus-visible{outline:2px solid var(--ach-accent);outline-offset:3px}

/* ---- Grid: desktop 3 / tablet 2 / small 1 ---- */
.ach-panel{animation:ach-fade .18s ease-out}
.ach-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1023px){.ach-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:639px){.ach-grid{grid-template-columns:minmax(0,1fr);gap:1rem}}
@media (min-width:640px){.ach-grid{gap:1.5rem}}

/* ---- Photocard, 2:3 ---- */
.ach-card{position:relative;display:flex;flex-direction:column;width:100%;max-width:340px;margin-inline:auto;
  aspect-ratio:2/3;padding:.75rem;text-align:left;cursor:pointer;color:rgb(var(--color-fg));
  border-radius:1rem;border:1px solid var(--ach-border);
  background:linear-gradient(180deg,var(--ach-soft),transparent 45%),var(--theme-card-bg,rgb(var(--color-ink-surface)/.6));
  box-shadow:inset 0 0 0 1px rgb(var(--color-fg)/.04),0 0 0 0 transparent;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ach-card:hover{transform:translateY(-4px);border-color:var(--ach-accent);
  box-shadow:0 12px 30px -10px var(--ach-glow),0 0 0 1px var(--ach-accent)}
.ach-card--enter{animation:ach-rise .2s ease-out backwards;animation-delay:calc(var(--i,0)*50ms)}

.ach-photo{position:relative;flex:1 1 auto;min-height:0;display:block}
.ach-photo-ring{position:absolute;inset:0;display:block;padding:2px;border-radius:.75rem;overflow:hidden;
  background:linear-gradient(135deg,var(--ach-accent),var(--ach-accent-2))}
.ach-photo-ring--sm{position:relative;flex:none;width:4.5rem;height:4.5rem;inset:auto}
.ach-photo-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(.75rem - 2px)}
.ach-photo-mono{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:calc(.75rem - 2px);
  background:rgb(var(--color-ink-soft));color:var(--ach-accent);font-family:var(--font-display,inherit);font-size:3rem;font-weight:600}

.ach-badge{position:absolute;right:.625rem;bottom:.625rem;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:3.25rem;height:3.25rem;border-radius:9999px;background:var(--ach-accent);color:var(--ach-on);
  border:3px solid rgb(var(--color-ink-soft));line-height:1;animation:ach-pulse 5.5s ease-out infinite}
.ach-badge small{font-size:.5625rem;font-weight:700;letter-spacing:.12em;opacity:.8}
.ach-badge strong{font-size:1.125rem;font-weight:800;font-variant-numeric:tabular-nums}

.ach-body{display:flex;flex-direction:column;gap:.125rem;padding:.75rem .25rem .25rem}
.ach-artist{font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--color-mist))}
.ach-name{font-family:var(--font-display,inherit);font-size:1.25rem;font-weight:600;line-height:1.2;color:rgb(var(--color-fg));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.ach-level{font-size:.8125rem;font-weight:600;color:var(--ach-accent)}
.light .ach-level{color:var(--ach-accent)}
.ach-date{font-size:.75rem;color:rgb(var(--color-mist));margin:0}

/* ---- Detail dialog ---- */
.ach-backdrop{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:1rem;
  background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:ach-fade .18s ease-out}
.ach-modal{position:relative;width:100%;max-width:28rem;max-height:85vh;overflow-y:auto;padding:1.25rem;border-radius:1rem;
  background:rgb(var(--color-ink-soft));border:1px solid var(--ach-accent);color:rgb(var(--color-fg));
  box-shadow:0 20px 60px -20px var(--ach-glow);animation:ach-rise .2s ease-out}
.ach-modal-head{display:flex;gap:1rem;align-items:center;margin-bottom:1.25rem;padding-right:2rem}
.ach-modal .ach-name{font-size:1.375rem}
.ach-close{position:absolute;top:.5rem;right:.75rem;width:2rem;height:2rem;border-radius:9999px;font-size:1.5rem;line-height:1;
  color:rgb(var(--color-mist));background:transparent}
.ach-close:hover{color:rgb(var(--color-fg))}
.ach-section{font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--color-mist));margin:0 0 .5rem}
.ach-history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.375rem}
.ach-hrow{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:.75rem;
  background:rgb(var(--color-ink-border)/.25);border:1px solid rgb(var(--color-ink-border)/.5)}
.ach-hlv{flex:none;min-width:3rem;font-size:.75rem;font-weight:700;color:var(--ach-accent);font-variant-numeric:tabular-nums}
.ach-hname{flex:1;min-width:0;font-size:.875rem;color:rgb(var(--color-fg))}
.ach-hdate{flex:none;font-size:.75rem;color:rgb(var(--color-mist))}

/* ---- Motion ---- */
@keyframes ach-fade{from{opacity:0}to{opacity:1}}
@keyframes ach-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* one soft ring roughly every 5.5s, quiet the rest of the time */
@keyframes ach-pulse{0%{box-shadow:0 0 0 0 var(--ach-glow)}35%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 10px transparent}}

@media (prefers-reduced-motion:reduce){
  .ach-panel,.ach-card,.ach-card--enter,.ach-badge,.ach-backdrop,.ach-modal{animation:none!important}
  .ach-card,.ach-tab{transition:none!important}
  .ach-card:hover{transform:none}
}

/* ---- Per-song section ---- */
.ach-songs{margin-top:2rem}
.ach-more{display:block;margin:1.5rem auto 0;padding:.5rem 1.25rem;border-radius:9999px;font-size:.875rem;font-weight:500;
  color:rgb(var(--color-fg));background:transparent;border:1px solid rgb(var(--color-ink-border)/.7);cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease}
.ach-more:hover{border-color:var(--theme-accent,#59B292);background:var(--theme-accent-soft,rgba(89,178,146,.15))}
.ach-more:focus-visible{outline:2px solid var(--theme-accent,#59B292);outline-offset:3px}

/* ---- Confetti: one short burst on newly unlocked cards, in the artist's own colours ---- */
.ach-card--new{animation:ach-rise .2s ease-out backwards,ach-glow 1.8s ease-out .4s 1 both}
.ach-confetti{position:absolute;left:50%;top:38%;width:0;height:0;pointer-events:none;z-index:2}
.ach-confetti i{position:absolute;left:0;top:0;width:var(--s,6px);height:calc(var(--s,6px)*1.6);border-radius:1px;opacity:0;
  background:var(--ach-accent);transform:translate(-50%,-50%);animation:ach-confetti 1.3s cubic-bezier(.15,.7,.3,1) var(--d,0ms) 1 forwards}
.ach-confetti i:nth-child(3n+2){background:var(--ach-accent-2)}
.ach-confetti i:nth-child(3n){background:#fff}
@keyframes ach-confetti{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.4)}
  15%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + cos(var(--a))*var(--r)*2.2),calc(-50% + sin(var(--a))*var(--r)*2.2 + 70px)) rotate(calc(var(--rot) + 360deg)) scale(1)}
}
@keyframes ach-glow{0%{box-shadow:0 0 0 0 transparent}40%{box-shadow:0 0 26px 3px var(--ach-glow)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.ach-confetti{display:none}.ach-card--new{animation:none!important}}

.ach-streams{font-size:.8125rem;font-weight:600;color:rgb(var(--color-fg));font-variant-numeric:tabular-nums}
.ach-photo-img{background:rgb(var(--color-ink-soft))}