/* The Muck Bucks code window (assets/code-reward.js). --muck-* tokens. */
.cr-lock{overflow:hidden}
.cr-overlay{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:16px;background:#000c;opacity:0;transition:opacity .2s}
.cr-overlay.cr-open{opacity:1}
.cr-card{position:relative;width:min(420px,100%);padding:26px 26px 22px;text-align:center;border:1px solid color-mix(in srgb,var(--muck-gold,#ffd34f) 45%,transparent);border-radius:18px;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--muck-gold,#ffd34f) 18%,#161a16) 0%,#121512 60%);box-shadow:0 30px 80px #000c,0 0 0 1px #0006;color:var(--muck-text,#f3f2e9);font-family:var(--muck-font,Inter,sans-serif);transform:translateY(10px) scale(.97);transition:transform .25s}
.cr-open .cr-card{transform:none}
.cr-boomed .cr-card{animation:cr-shake .45s ease-out}
.cr-x{position:absolute;top:10px;right:10px;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--muck-text-3,#8a8f88);cursor:pointer}
.cr-x:hover{color:var(--muck-text,#fff)}

.cr-stage{position:relative;height:150px;margin:-4px auto 6px;display:grid;place-items:center}
.cr-bomb{position:relative;width:86px;height:86px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#5b5f66 0,#2a2d31 38%,#0d0e10 75%);box-shadow:inset -8px -10px 16px #0009,0 10px 24px #0008;transition:transform .2s,opacity .2s}
.cr-bomb::before{content:'';position:absolute;top:-10px;left:50%;width:22px;height:16px;transform:translateX(-50%);border-radius:4px;background:linear-gradient(#3a3d42,#1c1e21)}
/* The fuse comes out of the cap and burns down to it: the cord shortens from the tip (dash offset) while the spark
   rides the same path (offset-path), both over 1.5s; code-reward.js sets it off at 1.7s. */
.cr-fuse{position:absolute;left:40px;top:-56px;width:60px;height:56px}
.cr-fuse svg{display:block;overflow:visible}
.cr-fuse path{fill:none;stroke:#c9a46a;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:0;filter:drop-shadow(0 1px 0 #5c4426);animation:cr-burn 1.5s .15s linear forwards}
.cr-spark{position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle,#fff 0 20%,#ffd34f 35%,#ff7a1a 60%,transparent 70%);filter:drop-shadow(0 0 8px #ffb02e);offset-path:path('M3 50 C2 34 14 26 26 30 S48 32 52 8');offset-rotate:0deg;offset-distance:100%;animation:cr-spark .16s infinite alternate,cr-spark-run 1.5s .15s linear forwards}
.cr-theme-bomb:not(.cr-boomed):not(.cr-still) .cr-bomb{animation:cr-tremble .08s 1.2s infinite alternate}
.cr-theme-coins .cr-bomb{display:none}
.cr-flash{position:absolute;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle,#fff 0,#ffd34f 35%,#ff7a1a00 70%);opacity:0;pointer-events:none}
.cr-boom{position:absolute;font:900 34px/1 var(--muck-font,Inter,sans-serif);letter-spacing:-1px;color:var(--muck-gold,#ffd34f);text-shadow:0 3px 0 #a5520f,0 0 24px #ff9a2a;opacity:0;transform:scale(.4) rotate(-6deg)}
.cr-coins{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cr-coins i{position:absolute;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6c8 0,#ffd34f 35%,#c8901d 100%);box-shadow:inset 0 0 0 2px #e3b23c,0 2px 6px #0008;opacity:0}

/* It goes off */
.cr-boomed .cr-bomb{transform:scale(1.25);opacity:0;transition:transform .12s,opacity .12s}
.cr-boomed .cr-fuse,.cr-boomed .cr-spark{display:none}
.cr-boomed .cr-flash{animation:cr-flash .6s ease-out forwards}
.cr-boomed .cr-boom{animation:cr-boom .7s cubic-bezier(.2,1.6,.4,1) forwards}
.cr-boomed .cr-coins i{animation:cr-coin 1.1s cubic-bezier(.15,.7,.3,1) var(--d) forwards}
.cr-boomed .cr-amount{animation:cr-pop .5s .15s ease-out both}

.cr-eyebrow{margin:0 0 4px;color:var(--muck-gold,#ffd34f);font:800 11px var(--muck-font,Inter,sans-serif);letter-spacing:.16em;text-transform:uppercase}
.cr-amount{margin:0;font:900 54px/1.05 var(--muck-font,Inter,sans-serif);letter-spacing:-2px;color:var(--muck-gold,#ffd34f);font-variant-numeric:tabular-nums;text-shadow:0 0 30px color-mix(in srgb,var(--muck-gold,#ffd34f) 35%,transparent)}
.cr-unit{margin:2px 0 12px;color:var(--muck-text-2,#c9cbc4);font:800 11px var(--muck-font,Inter,sans-serif);letter-spacing:.18em;text-transform:uppercase}
.cr-sub{margin:0 auto 8px;max-width:300px;color:var(--muck-text-2,#c9cbc4);font-size:14px;line-height:1.5}
.cr-balance{margin:0 0 18px;color:var(--muck-text-3,#8a8f88);font-size:13px}
.cr-balance b{color:var(--muck-text,#f3f2e9);font-variant-numeric:tabular-nums}
.cr-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cr-actions button{height:46px;padding:0 22px;border-radius:8px;font:800 14px var(--muck-font,Inter,sans-serif);cursor:pointer}
.cr-go{border:1px solid transparent;background:var(--muck-gold-cta,#ffd34f);color:var(--muck-gold-ink,#211d14)}
.cr-go:hover{background:var(--muck-gold-cta-hover,#ffe68f)}
.cr-ok{border:1px solid var(--muck-line-strong,#3a3f3a);background:var(--muck-surface-2,#1c201c);color:var(--muck-text,#f3f2e9)}
.cr-ok:hover{border-color:var(--muck-gold-muted,#a8893f);color:var(--muck-gold,#ffd34f)}

/* Reduced motion: the result, no fireworks */
.cr-still .cr-bomb,.cr-still .cr-flash,.cr-still .cr-coins{display:none}
.cr-still .cr-boom{opacity:1;transform:none}
.cr-still .cr-stage{height:70px}

@keyframes cr-spark{to{transform:scale(1.35);filter:drop-shadow(0 0 14px #ffd34f)}}
@keyframes cr-burn{to{stroke-dashoffset:100}}
@keyframes cr-spark-run{to{offset-distance:0%}}
@keyframes cr-tremble{from{transform:translate(-1px,0) rotate(-1.5deg)}to{transform:translate(1px,-1px) rotate(1.5deg)}}
@keyframes cr-flash{0%{opacity:1;transform:scale(.5)}100%{opacity:0;transform:scale(7)}}
@keyframes cr-boom{0%{opacity:0;transform:scale(.4) rotate(-6deg)}60%{opacity:1;transform:scale(1.15) rotate(3deg)}100%{opacity:1;transform:scale(1) rotate(-2deg)}}
@keyframes cr-coin{0%{opacity:1;transform:translate(0,0) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 40px)) rotate(var(--r))}}
@keyframes cr-pop{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes cr-shake{0%,100%{transform:none}20%{transform:translate(-6px,3px) rotate(-1deg)}40%{transform:translate(5px,-3px) rotate(1deg)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}}
@media(max-width:420px){.cr-amount{font-size:44px}.cr-card{padding:22px 18px 18px}}