/* Achievements (js/ach.js): the screen, badges, the unlock moment and the chat card */
@property --achA{syntax:"<angle>";inherits:false;initial-value:0deg}
.settings.achp{z-index:14;display:flex;flex-direction:column}
.ach-body>div{max-width:620px;margin:0 auto}
.ach-empty{color:var(--muted);text-align:center;margin:48px 12px;font-size:14.5px}

/* tabs */
.ach-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:10px 16px 4px;padding:4px;border-radius:18px;background:var(--raise)}
.ach-tabs button{display:flex;align-items:center;justify-content:center;gap:7px;height:40px;border-radius:14px;font-weight:700;font-size:14px;color:var(--muted);transition:background .25s,color .25s,transform .28s cubic-bezier(.34,1.56,.64,1)}
.ach-tabs svg{width:18px;height:18px}
.ach-tabs button[aria-selected="true"]{background:var(--me);color:var(--ink)}
.ach-tabs button:active,.ach-seg button:active,.ach-who button:active,.ach-chips .chip:active{transform:scale(.94);transition-duration:.08s}

/* badges: the ring is the outer edge, all the way around */
.achb{--c:#9fc6ff;--s:48px;--ring:linear-gradient(#3a3a3d,#3a3a3d);position:relative;width:var(--s);height:var(--s);flex:none;border-radius:50%;display:grid;place-items:center;color:#151516;
  border:max(2px,calc(var(--s) * .075)) solid transparent;
  background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--c) 55%,#fff) 0,var(--c) 45%,color-mix(in srgb,var(--c) 62%,#000) 100%) padding-box,var(--ring) border-box;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.28),inset 0 -3px 6px rgba(0,0,0,.18)}
.achb svg{width:50%;height:50%}
.achb.r-rare{--ring:conic-gradient(from 210deg,#9aa3b2,#eef2f8,#9aa3b2,#eef2f8,#9aa3b2)}
.achb.r-legend{--ring:conic-gradient(from var(--achA),#e7a93c,#ffe08a,#e7a93c,#fff3c4,#e7a93c);animation:achSpin 6s linear infinite}
@keyframes achSpin{to{--achA:360deg}}
.achb.locked{--ring:linear-gradient(#2c2c2f,#2c2c2f);background:radial-gradient(circle at 34% 28%,#3c3c40,#2a2a2d 60%,#202022) padding-box,var(--ring) border-box;color:#66666c;box-shadow:inset 0 0 0 2px rgba(255,255,255,.05);animation:none}
.achb.secret svg{width:40%;height:40%}
.achb .lk{position:absolute;right:-5px;bottom:-5px;width:19px;height:19px;border-radius:50%;background:var(--line);display:grid;place-items:center;color:var(--muted);box-shadow:0 0 0 2px var(--raise)}
.achb .lk svg{width:11px;height:11px}
.achb.flip{animation:achFlip 1s cubic-bezier(.34,1.56,.64,1)}
.achb.flip.r-legend{animation:achFlip 1s cubic-bezier(.34,1.56,.64,1),achSpin 6s linear infinite}
@keyframes achFlip{0%{transform:perspective(400px) rotateY(-180deg) scale(.7)}100%{transform:none}}

/* Mine */
.ach-hero{margin-top:14px;border-radius:24px;padding:18px;background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--me) 22%,var(--raise)),var(--raise) 60%);display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.ach-hero .ring{width:96px;height:96px;position:relative}
.ach-hero .ring svg{width:100%;height:100%}
.ach-hero .ring circle:last-child{transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1)}
.ach-hero .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ach-hero .num b{font:600 24px/1 var(--display)}
.ach-hero .num small{font-size:11px;color:var(--muted);font-weight:700}
.ach-hero .pts{font:600 30px/1 var(--display);font-variant-numeric:tabular-nums}
.ach-hero .pts span{font:700 13px var(--body);color:var(--muted);margin-left:5px}
.ach-hero .lvl{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:700;font-size:13px;color:var(--me);background:color-mix(in srgb,var(--me) 14%,transparent);padding:4px 10px;border-radius:99px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--me) 30%,transparent)}
.ach-hero .lvl svg{width:14px;height:14px}
.ach-hero .next{font-size:12.5px;color:var(--muted);margin-top:8px}
.ach-first{text-align:center;margin-top:16px}
.ach-recent{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:4px 16px 6px}
.ach-recent::-webkit-scrollbar{display:none}
.ach-rc{flex:none;width:104px;padding:14px 8px 12px;border-radius:20px;background:var(--raise);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.ach-rc b{font:500 13.5px/1.15 var(--display);text-wrap:balance}
.ach-rc small{font-size:11px;color:var(--muted);margin-top:-4px}
.ach-glist,.ach-alist{display:flex;flex-direction:column;gap:8px}
.ach-alist{margin-top:8px}
.ach-grow{display:flex;align-items:center;gap:12px;padding:12px;border-radius:20px;background:var(--raise);width:100%;text-align:left}
.gico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;flex:none;color:#161617;background:var(--c)}
.gico svg{width:24px;height:24px}
.gico.sm{width:24px;height:24px;border-radius:8px}
.gico.sm svg{width:14px;height:14px}
.ach-grow .gm{flex:1;min-width:0;display:flex;flex-direction:column}
.ach-grow .gm b{font:500 16px/1.2 var(--display)}
.ach-grow .gm small{font-size:12.5px;color:var(--muted);margin-top:2px}
.ach-body .bar{display:block;height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:8px}
.ach-body .bar i,.sheet .bar i{display:block;height:100%;border-radius:inherit;background:var(--c,var(--me));transition:width .7s cubic-bezier(.2,.8,.2,1)}
.ach-grow .cnt{font:600 15px var(--display);font-variant-numeric:tabular-nums}
.ach-grow .cnt span{color:var(--muted)}
.ach-body .chev{color:var(--muted);font-size:22px;line-height:1}
.ach-seg-row{padding-top:0}
.ach-seg{display:flex;flex:1;background:var(--ink);border-radius:12px;padding:3px;gap:2px}
.ach-seg button{flex:1;padding:8px 6px;border-radius:9px;font-size:13px;font-weight:700;color:var(--muted);transition:background .2s,color .2s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.ach-seg button[aria-checked="true"]{background:var(--raise);color:var(--text);box-shadow:0 1px 0 rgba(255,255,255,.05)}
.ach-seg.wide{margin-top:14px;background:var(--raise)}
.ach-seg.wide button[aria-checked="true"]{background:var(--line)}

/* a game's list */
.ach-chips{display:flex;gap:6px;margin:14px 0 6px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.ach-chips::-webkit-scrollbar{display:none}
.ach-chips .chip{flex:none;padding:7px 13px;border-radius:99px;background:var(--raise);font-weight:700;font-size:13px;color:var(--muted);transition:background .2s,color .2s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.ach-chips .chip[aria-pressed="true"]{background:var(--text);color:var(--ink)}
.ach-row{display:flex;gap:14px;align-items:center;padding:13px 14px;border-radius:20px;background:var(--raise);width:100%;text-align:left}
.ach-row .t{flex:1;min-width:0;display:flex;flex-direction:column}
.ach-row b{font:500 15.5px/1.2 var(--display)}
.ach-row .d{font-size:13px;color:var(--muted);margin-top:2px}
.ach-row .m{display:flex;gap:8px;align-items:center;margin-top:6px;font-size:11.5px;font-weight:700;color:var(--muted);flex-wrap:wrap;opacity:.85}
.ach-row .pt{font:600 13px var(--display);flex:none;text-align:right;font-variant-numeric:tabular-nums}
.ach-row .pt small{display:block;font:700 10.5px var(--body);color:var(--muted)}
.ach-row.lock b{color:color-mix(in srgb,var(--text) 80%,transparent)}
.rar.rare{color:#eef2f8}
.rar.legend{color:#ffe08a}

/* Compare */
.ach-who{display:flex;gap:8px;margin:14px 0 10px;overflow-x:auto;scrollbar-width:none;padding:2px}
.ach-who::-webkit-scrollbar{display:none}
.ach-who button{flex:none;display:flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:99px;background:var(--raise);font-weight:700;font-size:13px;transition:background .2s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.ach-who button[aria-pressed="true"]{background:color-mix(in srgb,var(--c) 26%,var(--raise));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 60%,transparent)}
.ach-who .av,.ach-lb .av,.ach-fr .av{width:24px;height:24px;font-size:11px}
.ach-vs{border-radius:24px;padding:18px 16px 14px;background:linear-gradient(105deg,color-mix(in srgb,var(--me) 20%,var(--raise)) 0,var(--raise) 45%,var(--raise) 55%,color-mix(in srgb,var(--fc) 22%,var(--raise)) 100%)}
.ach-vs .vsrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;text-align:center}
.ach-vs .av.big{width:60px;height:60px;font-size:24px;margin:0 auto;box-shadow:0 0 0 3px var(--raise)}
.ach-vs .nm{font:500 15px var(--display);margin-top:8px}
.ach-vs .p{font:600 24px/1 var(--display);font-variant-numeric:tabular-nums;margin-top:4px}
.ach-vs .p small{display:block;font:700 11px var(--body);color:var(--muted);margin-top:4px}
.ach-vs .vsmid{font:700 13px var(--display);color:var(--muted);width:34px;height:34px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.ach-vs .split{display:flex;height:8px;border-radius:99px;overflow:hidden;margin-top:14px;gap:3px}
.ach-vs .split i{display:block;height:100%;border-radius:99px;transition:flex-grow .6s cubic-bezier(.2,.8,.2,1)}
.ach-vs .lead{text-align:center;margin-top:10px;font-weight:800;font-size:13px;color:var(--muted)}
.ach-cg{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;align-items:center;padding:12px 14px;border-radius:18px;background:var(--raise)}
.ach-cg .gn{grid-column:1/-1;display:flex;align-items:center;gap:8px;font:500 14.5px var(--display)}
.ach-cg .half{display:flex;align-items:center;gap:8px;font:600 12.5px var(--display);font-variant-numeric:tabular-nums}
.ach-cg .half .bar{flex:1;margin:0}
.ach-cg .half.r{flex-direction:row-reverse}
.ach-cg .half.r .bar{transform:scaleX(-1)}
.ach-crow{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:18px;background:var(--raise)}
.ach-crow .t{flex:1;min-width:0;display:flex;flex-direction:column}
.ach-crow b{font:500 14.5px/1.2 var(--display)}
.ach-crow small{font-size:12px;color:var(--muted)}
.ach-crow .mini{flex:none;padding:7px 12px;border-radius:12px;font-weight:800;font-size:12.5px;background:var(--c);color:var(--ink);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.ach-crow .mini:active{transform:scale(.92)}

/* Ranks */
.ach-podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:8px;margin-top:10px}
.ach-podium .pod{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.ach-podium .pod>.av{width:52px;height:52px;font-size:20px}
.ach-podium .medal{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--display);color:#1a1a1a;margin-top:-14px;position:relative}
.ach-podium .nm{font:500 14px var(--display)}
.ach-podium .blk{width:100%;border-radius:16px 16px 10px 10px;background:var(--raise);padding:10px 4px 12px;display:flex;flex-direction:column;align-items:center}
.ach-podium .pod.me .blk{background:color-mix(in srgb,var(--me) 18%,var(--raise))}
.ach-podium .blk b{font:600 22px/1 var(--display)}
.ach-podium .blk small{font-size:11.5px;color:var(--muted);font-weight:700;margin-top:3px}
.ach-lb{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.ach-lb .lrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--raise)}
.ach-lb .lrow .av{width:30px;height:30px;font-size:13px}
.ach-lb .lrk{width:22px;text-align:center;font:600 14px var(--display);color:var(--muted);font-variant-numeric:tabular-nums}
.ach-lb .nm{flex:1;font-weight:700;min-width:0}
.ach-lb .nm small{display:block;font-weight:600;font-size:11.5px;color:var(--muted)}
.ach-lb .p{font:600 15px var(--display);font-variant-numeric:tabular-nums}
.ach-lb .lrow.me{background:color-mix(in srgb,var(--me) 16%,var(--raise));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--me) 35%,transparent)}

/* rows and buttons spring back */
.ach-grow,.ach-row,.ach-rc{transition:transform .28s cubic-bezier(.34,1.56,.64,1),background .2s}
.ach-grow:active,.ach-row:active,.ach-rc:active{transform:scale(.97);transition-duration:.08s}

/* one badge, up close (in the sheet) */
.ach-big{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.ach-big .achb{margin:8px 0 10px}
.ach-big h3{font:600 23px/1.1 var(--display);margin:0;text-wrap:balance}
.ach-big p{margin:0;color:var(--muted);font-size:14.5px;max-width:32ch}
.ach-big .facts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.ach-big .facts span{padding:6px 11px;border-radius:99px;background:var(--line);font-size:12.5px;font-weight:700;color:var(--muted)}
.ach-big .facts b{color:var(--text)}
.ach-big .when{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:6px}
.ach-big .bar.big{display:block;height:8px;width:200px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:6px}
.ach-fr{display:flex;align-items:center;gap:10px;justify-content:center;margin-top:12px;font-size:13px;color:var(--muted);font-weight:700}
.ach-fr .stack{display:flex}
.ach-fr .stack .av+.av{margin-left:-7px}
.ach-fr .av{box-shadow:0 0 0 2px var(--raise)}
.pill.ach-wide{display:block;width:100%;margin-top:18px}

/* the unlock moment */
.ach-toast{position:absolute;left:12px;right:12px;top:calc(10px + env(safe-area-inset-top,0px));z-index:40;max-width:440px;margin:0 auto;border-radius:24px;padding:12px 14px 12px 12px;display:flex;gap:12px;align-items:center;text-align:left;
  background:rgba(28,28,30,.86);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent),0 14px 40px rgba(0,0,0,.55),0 0 50px -10px color-mix(in srgb,var(--c) 50%,transparent);
  transform:translateY(-160%) scale(.9);opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .25s;overflow:hidden}
.ach-toast.on{transform:none;opacity:1;pointer-events:auto}
.ach-toast .t{flex:1;min-width:0;display:flex;flex-direction:column}
.ach-toast .k{font:800 11px var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ach-toast .k.rare{color:#eef2f8}
.ach-toast .k.legend{color:#ffe08a}
.ach-toast b{font:600 18px/1.15 var(--display);color:var(--text)}
.ach-toast small{font-size:12.5px;color:var(--muted)}
.ach-toast .plus{font:600 20px var(--display);color:var(--c);font-variant-numeric:tabular-nums}
.ach-toast.on .achb{animation:achIn .7s cubic-bezier(.34,1.56,.64,1) .12s both,achSpin 6s linear infinite}
.ach-toast::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:skewX(-18deg)}
.ach-toast.on::after{animation:achSweep 1.1s ease-out .45s}
@keyframes achSweep{to{left:120%}}
@keyframes achIn{0%{transform:scale(.2) rotate(-40deg)}60%{transform:scale(1.15) rotate(6deg)}100%{transform:none}}
.ach-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:39}

/* the card in a chat */
.ach-card{align-self:center;width:min(88%,360px);margin:8px auto;border-radius:22px;padding:14px;background:color-mix(in srgb,var(--c) 10%,var(--raise));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent);display:flex;flex-direction:column;gap:12px;user-select:none;-webkit-user-select:none}
.ach-card.in{animation:achPop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes achPop{0%{transform:scale(.85);opacity:0}100%{transform:none;opacity:1}}
.ach-card .row{display:flex;gap:12px;align-items:center}
.ach-card .k{font-size:12px;font-weight:800;color:var(--muted)}
.ach-card b{font:600 17px/1.15 var(--display);display:block}
.ach-card small{font-size:12px;color:var(--muted)}
.ach-card .acts{display:flex;gap:8px}
.ach-card .acts button{flex:1;padding:9px;border-radius:14px;font-weight:800;font-size:13px;background:var(--line);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.ach-card .acts button.p{background:var(--c);color:var(--ink)}
.ach-card .acts button:active{transform:scale(.94);transition-duration:.08s}
.ach-card .reacts:empty{display:none}

@media (prefers-reduced-motion:reduce){.achb,.ach-toast,.ach-toast .achb,.ach-card{animation:none!important}.ach-toast::after{display:none}}