/* Achievement screens (ach.js). Plum stage, brand magenta/orange/violet, glass card. */
body.ach-lock{overflow:hidden}
.ach-ov{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(120% 80% at 50% 18%,rgba(124,58,237,.55),rgba(61,36,64,.0) 60%),rgba(28,15,31,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:ach-in .28s ease-out both;font-family:var(--font,inherit)}
.ach-ov.ach-out{animation:ach-fade .18s ease-in both}
.ach-card{width:min(420px,100%);max-height:100%;overflow:auto;text-align:center;color:#fff5f8;padding:8px 6px 4px}
.ach-kicker{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffb35c;margin:4px 0 6px}
.ach-stage{position:relative;height:220px;display:flex;align-items:center;justify-content:center;margin:2px 0 4px}
.ach-medal{width:170px;height:170px;filter:drop-shadow(0 10px 22px rgba(255,61,122,.45));animation:ach-pop .7s cubic-bezier(.2,1.4,.4,1) both;position:relative;z-index:2}
.ach-steve{position:absolute;bottom:0;height:176px;width:auto;z-index:1;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45));animation:ach-bob 2.6s ease-in-out .6s infinite}
.ach-steve-l{left:2px;bottom:-4px;transform:rotate(-4deg)}
.ach-steve-r{left:-4px;bottom:-4px;height:150px}
.ach-sparks{position:absolute;inset:0;pointer-events:none;z-index:3}
.ach-sparks i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#ffd25c;opacity:0;
  animation:ach-spark 1.2s ease-out var(--d,0s) both;transform:rotate(var(--a)) translateY(0)}
.ach-title{margin:6px 0 4px;font-size:26px;line-height:1.15;font-weight:800;color:#fff}
.ach-desc{margin:0 0 6px;color:#e7c9d6;font-size:15px}
.ach-joke{margin:6px 8px 4px;font-size:16px;font-weight:600;color:#ffd9a8;line-height:1.35}
.ach-btn{margin:18px auto 6px;display:block;width:min(320px,100%);border:0;border-radius:16px;padding:15px 18px;font:800 17px/1 var(--font,inherit);cursor:pointer;
  color:#2b1430;background:linear-gradient(180deg,#ffa05a,var(--orange,#ff8a3d));box-shadow:0 5px 0 #c85f1c,0 14px 28px -8px rgba(255,138,61,.55)}
.ach-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #c85f1c}
.ach-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* streak */
.ach-stage-streak{height:230px}
.ach-flamebox{position:relative;width:150px;height:188px;z-index:2;animation:ach-pop .7s cubic-bezier(.2,1.4,.4,1) both}
.ach-flame{width:100%;height:100%;filter:drop-shadow(0 8px 24px rgba(255,138,61,.6));animation:ach-flick 1.4s ease-in-out infinite;transform-origin:50% 90%}
.ach-num{position:absolute;left:0;right:0;top:56px;font-size:70px;line-height:1;font-weight:900;color:#fff;-webkit-text-stroke:0;text-shadow:0 3px 0 rgba(160,30,70,.55),0 0 18px rgba(255,255,255,.35)}
.ach-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:12px 4px 4px;padding:10px 6px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.ach-day{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:700;color:#c4a8b6}
.ach-dm{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;background:rgba(255,255,255,.08)}
.ach-day.on .ach-dm{background:rgba(255,138,61,.28);box-shadow:inset 0 0 0 2px #ff8a3d}
.ach-day.sh .ach-dm{background:rgba(124,58,237,.35);box-shadow:inset 0 0 0 2px #a78bfa}
.ach-day.today .ach-dn{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ach-day.fut{opacity:.55}
.ach-shield{margin:6px 0 0;font-size:13px;color:#cdb8ff}
.ach-rec{margin:14px 6px 0;text-align:left;font-weight:800;font-size:14px;color:#ffd9a8}
.ach-bar{height:12px;margin-top:6px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.ach-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ff3d7a,#ff8a3d,#ffd25c);animation:ach-grow .9s ease-out .3s both;transform-origin:left}
/* book */
.ach-bookcover{width:118px;height:160px;border-radius:10px 14px 14px 10px;display:flex;align-items:center;justify-content:center;font-size:52px;z-index:2;position:relative;
  background:linear-gradient(145deg,#7c3aed,#d81b6b);box-shadow:inset 6px 0 0 rgba(0,0,0,.22),0 12px 26px rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.8);animation:ach-pop .7s cubic-bezier(.2,1.4,.4,1) both;margin-left:90px}
@keyframes ach-in{from{opacity:0}to{opacity:1}}
@keyframes ach-fade{to{opacity:0}}
@keyframes ach-pop{0%{transform:scale(.3) rotate(-25deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes ach-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes ach-flick{0%,100%{transform:scale(1) rotate(-1deg)}50%{transform:scale(1.05,.97) rotate(1.5deg)}}
@keyframes ach-spark{0%{opacity:0;transform:rotate(var(--a)) translateY(0)}20%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-120px)}}
@keyframes ach-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:420px){.ach-stage{height:200px}.ach-medal{width:150px;height:150px}.ach-steve{height:150px}.ach-steve-r{height:130px}.ach-bookcover{margin-left:70px;width:104px;height:142px}.ach-title{font-size:23px}.ach-flamebox{width:130px;height:163px}.ach-num{font-size:60px;top:48px}}
@media (prefers-reduced-motion:reduce){.ach-ov,.ach-ov *{animation:none!important}.ach-sparks{display:none}}