/* SkillUpBlox extras: celebrations, skill roadmap, pull-to-refresh, sound toggle. Restrained styling. */
@keyframes ex-fade{from{opacity:0}to{opacity:1}}
@keyframes ex-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes ex-fly{0%{opacity:0;transform:translate(-50vw,-40vh) scale(.2) rotate(-420deg)}65%{opacity:1;transform:translate(0,10px) scale(1.14) rotate(10deg)}82%{transform:translate(0,-5px) scale(.97) rotate(-3deg)}100%{opacity:1;transform:none}}
@keyframes ex-rays{to{transform:rotate(360deg)}}
@keyframes ex-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes ex-pulse{0%{box-shadow:0 0 0 0 rgba(99,102,241,.45)}100%{box-shadow:0 0 0 16px rgba(99,102,241,0)}}
@keyframes ex-spin{to{transform:rotate(360deg)}}

/* ---- celebration overlay ---- */
.ex-cel{position:fixed;inset:0;z-index:10100;display:grid;place-items:center;padding:20px;background:rgba(6,10,22,.94);animation:ex-fade .3s both;overflow:auto}
.ex-conf{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.ex-card{position:relative;z-index:2;text-align:center;max-width:400px;width:100%;color:#fff}
.ex-stage{position:relative;width:220px;height:220px;margin:0 auto 4px;display:grid;place-items:center}
.ex-rays{position:absolute;inset:-34px;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.14) 0 8deg,transparent 8deg 22deg);-webkit-mask:radial-gradient(circle,transparent 26%,#000 28%,transparent 70%);mask:radial-gradient(circle,transparent 26%,#000 28%,transparent 70%);animation:ex-rays 16s linear infinite}
.ex-badge{position:relative;z-index:2;animation:ex-fly 1s cubic-bezier(.2,.9,.25,1) .1s both}
.ex-badge .badge-medallion{width:124px!important;height:124px!important;animation:none!important}
.ex-badge .badge-medallion strong{font-size:46px}
.ex-kicker{display:inline-block;padding:6px 14px;border-radius:99px;background:#4f46e5;font:800 11px Manrope;letter-spacing:.18em;animation:ex-rise .45s ease .7s both}
.ex-card h2{font:800 clamp(26px,7vw,36px)/1.15 Manrope;letter-spacing:-.025em;margin:14px 0 8px;color:#fff;animation:ex-rise .45s ease .85s both}
.ex-card p{color:#c3cee4;line-height:1.6;margin:0 auto 22px;max-width:320px;font-size:14px;animation:ex-rise .45s ease .98s both}
.ex-card .cta{width:auto;min-width:170px;justify-content:center;margin:0 auto;animation:ex-rise .45s ease 1.1s both}

/* ---- sound toggle (sidebar) ---- */
#fxToggle span{font-size:inherit}

/* ---- pull to refresh ---- */
#ex-ptr{position:fixed;top:-48px;left:50%;z-index:10150;width:40px;height:40px;margin-left:-20px;border-radius:50%;display:grid;place-items:center;background:var(--panel,#fff);color:#2563eb;font:800 18px Manrope;border:1px solid var(--line);box-shadow:0 8px 24px rgba(16,24,40,.18);pointer-events:none;opacity:0;transition:opacity .2s}
#ex-ptr.show{opacity:1}#ex-ptr.ready{background:#2563eb;color:#fff;border-color:#2563eb}
#ex-ptr i{font-style:normal;display:block}#ex-ptr.spin i{animation:ex-spin .7s linear infinite}
html,body{overscroll-behavior-y:contain}

/* ---- skill roadmap ---- */
.rm-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:20px 22px;margin-bottom:16px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.rm-top>div:first-child{flex:1 1 220px;min-width:0}
.rm-top h2{margin:0;font:800 22px Manrope;letter-spacing:-.02em}.rm-top p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.rm-meter{flex:1 1 200px;max-width:300px}.rm-meter small{display:flex;justify-content:space-between;font:700 12px Manrope;color:var(--muted);margin-bottom:6px}
.rm-meter div{height:8px;border-radius:99px;background:rgba(120,130,150,.2);overflow:hidden}.rm-meter span{display:block;height:100%;width:0;border-radius:inherit;background:#2563eb;transition:width 1s cubic-bezier(.22,.8,.3,1)}
.rm-legend{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 10px;font-size:12px;color:var(--muted)}.rm-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.rm-stage{position:relative;margin:0 auto;max-width:600px;border-radius:18px;border:1px solid var(--line);background:var(--panel);overflow:hidden}
.rm-stage svg{position:absolute;inset:0;pointer-events:none}
.rm-base{fill:none;stroke:rgba(120,130,150,.35);stroke-width:4;stroke-dasharray:2 11;stroke-linecap:round}
.rm-done{fill:none;stroke:#6366f1;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset 1.4s cubic-bezier(.22,.8,.3,1)}
.rm-node{position:absolute;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:28px;cursor:pointer;padding:0;background:none;animation:ex-pop .45s cubic-bezier(.22,.8,.3,1) both;animation-delay:calc(var(--i)*70ms);z-index:2}
.rm-disc{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:var(--panel);border:3px solid var(--line);transition:transform .25s}
.rm-node:hover .rm-disc{transform:scale(1.07)}.rm-node:active{transform:translate(-50%,-50%) scale(.95)}
.rm-node.mastered .rm-disc{background:#f59e0b;border-color:#fbbf24;color:#fff}
.rm-node.progress .rm-disc{border:0;background:conic-gradient(#6366f1 calc(var(--p)*1%),rgba(120,130,150,.25) 0)}
.rm-node.progress .rm-disc::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--panel)}
.rm-node.progress .rm-disc span{position:relative}
.rm-node.progress.here{animation:ex-pop .45s cubic-bezier(.22,.8,.3,1) both,ex-pulse 2s ease-out .8s infinite}
.rm-node.available .rm-disc{border-color:#60a5fa}
.rm-node.locked{opacity:.5;filter:grayscale(1)}
.rm-badge{position:absolute;right:-3px;bottom:-3px;min-width:26px;height:26px;padding:0 5px;border-radius:99px;display:grid;place-items:center;font:800 11px Manrope;font-style:normal;background:var(--panel);color:var(--ink);border:2px solid var(--line);z-index:3}
.rm-node.mastered .rm-badge{background:#16a34a;color:#fff;border-color:#16a34a}
.rm-tag{position:absolute;top:-28px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:3px 9px;border-radius:99px;font:800 10px Manrope;letter-spacing:.08em;color:#fff;background:#4f46e5;z-index:3}
.rm-label{position:absolute;transform:translateX(-50%);width:min(160px,38%);text-align:center;z-index:1;pointer-events:none}
.rm-label b{display:block;font:700 13px/1.3 Manrope;color:var(--ink)}.rm-label small{display:block;margin-top:2px;font-size:11.5px;color:var(--muted)}
.rm-trophy .rm-disc{background:var(--panel)}.rm-trophy.mastered .rm-disc{background:#f59e0b}
.rm-sheet{position:sticky;bottom:12px;z-index:5;margin:14px auto 0;max-width:540px;padding:16px;border-radius:14px;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 36px rgba(16,24,40,.16);animation:ex-rise .3s ease both}
.rm-sheet h3{margin:0 0 4px;font:800 16px Manrope}.rm-sheet p{margin:0 0 10px;font-size:13px;color:var(--muted);line-height:1.5}
.rm-pb{height:7px;border-radius:99px;background:rgba(120,130,150,.2);overflow:hidden;margin-bottom:12px}.rm-pb span{display:block;height:100%;background:#2563eb}
.rm-sheet .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.rm-sheet .row .cta{width:auto;margin:0}
.rm-sheet .hint{color:#b45309}html[data-theme="dark"] .rm-sheet .hint{color:#fbbf24}
.ex-note{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:10200;padding:9px 16px;border-radius:99px;background:#101827;color:#fff;font:700 13px Manrope;box-shadow:0 10px 28px rgba(0,0,0,.3);animation:ex-rise .25s ease both;pointer-events:none}
@media(max-width:760px){.rm-top{padding:16px}.rm-node{width:66px;height:66px}}
@media(prefers-reduced-motion:reduce){.ex-rays,.rm-node.progress.here{animation:none}}