/* Run-earnings card (motions-earnings.js). Frosted tiles that sit inside a game's results screen, or the
   standalone "Run complete" overlay. Tinted per game like the Clip Game cards; one-shot motion only. */
.mxe,.mxe-overlay{
 --mxe-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --mxe-ink:#17154d;--mxe-sub:#4a4677;--mxe-faint:#17154d1f;--mxe-tile:#f5f2ffeb;--mxe-edge:#ffffffc4;
 --mxe-accent:#7a3cff;--mxe-bar:linear-gradient(90deg,#e23cf6,#8b3dff);--mxe-track:#17154d24;
 --mxe-glass:linear-gradient(165deg,#f7f4ffeb,#ddd5fdd6 55%,#c3b8f6cc);--mxe-veil:#0b063052;
 --mxe-cta:linear-gradient(180deg,#e04cff,#9a2cff 55%,#7a1ff0);
}
.mxe[data-theme=rail],.mxe-overlay[data-theme=rail]{--mxe-ink:#15184a;--mxe-sub:#4a4766;--mxe-faint:#15184a1f;--mxe-tile:#fff8f2ed;--mxe-accent:#ff6a45;--mxe-bar:linear-gradient(90deg,#ffbf2e,#ff6a45);--mxe-track:#15184a1f;--mxe-glass:linear-gradient(165deg,#fff8f2e0,#ffdcc6c4 55%,#ffd0b8b8);--mxe-veil:#2a120533;--mxe-cta:linear-gradient(180deg,#ff8a5c,#ff5a36)}
.mxe[data-theme=rally],.mxe-overlay[data-theme=rally]{--mxe-ink:#13204a;--mxe-sub:#3f5068;--mxe-faint:#13204a1f;--mxe-tile:#f3fffeed;--mxe-accent:#ff6f59;--mxe-bar:linear-gradient(90deg,#1fb5b0,#ff6f59);--mxe-track:#13204a1f;--mxe-glass:linear-gradient(165deg,#effefde0,#c4ecebc4 55%,#ffd9c3b8);--mxe-veil:#1d0b0533;--mxe-cta:linear-gradient(180deg,#ff8b74,#ff5a43)}

/* ---- panel ---- */
.mxe{container-type:inline-size;display:grid;gap:10px;width:100%;max-width:480px;margin:12px auto 0;box-sizing:border-box;color:var(--mxe-ink);font:15px/1.35 var(--mxe-font);-webkit-font-smoothing:antialiased;text-align:left}
.mxe *,.mxe *::before,.mxe *::after{box-sizing:border-box}
.mxe [hidden]{display:none!important}
.mxe-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mxe-earn,.mxe-strip,.mxe-guest,.mxe-note{border-radius:22px;background:var(--mxe-tile);border:1.5px solid var(--mxe-edge);box-shadow:inset 0 1px 0 #fff,0 10px 30px -18px #0a0a2a80;-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.mxe-gem{width:1em;height:1em;flex:none;vertical-align:-.14em;object-fit:contain}

/* coins -> Bucks row */
.mxe-earn{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;min-height:80px}
.mxe-main{display:grid;gap:4px;min-width:0}
.mxe-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px}
.mxe-coin{position:relative;flex:none;width:54px;height:54px;filter:drop-shadow(0 4px 8px #c98a0055)}
.mxe-coin>img{width:100%;height:100%;display:block;object-fit:contain}
.mxe-burst{position:absolute;inset:50% auto auto 50%;width:0;height:0;pointer-events:none}
.mxe-burst b{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:2px;background:#ffd23f;opacity:0;transform:rotate(45deg)}
.mxe[data-theme=rally] .mxe-burst b{background:#d7f04a}
.mxe-got{display:flex;align-items:baseline;gap:8px;min-width:0}
.mxe-num{font-weight:900;font-size:34px;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mxe-skel{display:inline-block;align-self:center;width:46px;height:18px;border-radius:9px;background:var(--mxe-faint)}
.mxe-amt{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.mxe-wallet{display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:13.5px;font-weight:600;color:var(--mxe-sub)}
.mxe-wallet .mxe-amt{padding:2px 8px 2px 5px;border-radius:999px;background:#fff;border:1px solid var(--mxe-faint);color:var(--mxe-ink);font-size:14px;box-shadow:0 2px 6px -3px #0003}
.mxe-wallet .mxe-gem{width:16px;height:16px}

/* the wallet number: an odometer while it rolls (motions-earnings.js roll()) */
.mxe-odo{display:inline-flex;font-variant-numeric:tabular-nums}
.mxe-rolling{height:1.2em;line-height:1.2em;overflow:hidden;align-items:flex-start}
.mxe-col{display:inline-block;height:1.2em;overflow:hidden}
.mxe-strip-d{display:flex;flex-direction:column;will-change:transform}
.mxe-strip-d>span{display:block;height:1.2em;line-height:1.2em;text-align:center}
/* a tile that opens its own row when its beat comes (bonus lines, the unlock moment): no gap reserved before */
.mxe-open{display:grid;grid-template-rows:1fr;min-width:0}
.mxe-open>*{min-height:0;overflow:hidden}
.mxe-fly{position:fixed;z-index:2147483646;margin:0;pointer-events:none;filter:drop-shadow(0 4px 6px #0005);will-change:transform}

/* round 2: server bonus lines, one per row */
.mxe-bonuses{list-style:none;margin:0;padding:6px 8px;display:grid;gap:4px;border-radius:18px;background:var(--mxe-tile);border:1.5px solid var(--mxe-edge);box-shadow:inset 0 1px 0 #fff}
.mxe-bonuses li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 8px;border-radius:12px;font-weight:700;font-size:14px}
.mxe-bonuses li:nth-child(odd){background:#ffffff8c}
.mxe-blabel{display:inline-flex;align-items:center;gap:6px}
.mxe-blabel::before{content:"";width:8px;height:8px;border-radius:2px;transform:rotate(45deg);background:linear-gradient(135deg,#ffe066,#ff9d1a)}
.mxe-bamt{display:inline-flex;align-items:center;gap:4px;color:var(--mxe-accent);font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.mxe-bamt .mxe-gem{width:18px;height:18px}

/* round 2: "You can unlock <item>!" when this run crossed a price */
.mxe-moment{position:relative;display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;padding:12px;border-radius:22px;overflow:hidden;
 background:linear-gradient(135deg,#fff7d6,#ffe1f5 55%,#e6dcff);border:2px solid #ffd257;box-shadow:0 12px 30px -14px #c98a00aa,inset 0 1px 0 #fff}
.mxe-mthumb{position:relative;display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,#5b4bd8,#1b1650);box-shadow:inset 0 0 0 2px #ffffffa0}
.mxe-mthumb img{position:relative;width:100%;height:100%;object-fit:cover;display:block}
.mxe-rays{position:absolute;inset:-40%;background:repeating-conic-gradient(#ffe48a66 0 8deg,#ffe48a00 8deg 24deg);-webkit-mask:radial-gradient(circle,#000 20%,transparent 66%);mask:radial-gradient(circle,#000 20%,transparent 66%)}
.mxe-mbody{display:grid;gap:3px;min-width:0}
.mxe-mkick{font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#b0560a}
.mxe-mname{font-weight:900;font-size:22px;line-height:1.05;letter-spacing:-.02em;overflow-wrap:anywhere}
.mxe-mmeta{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:13px;font-weight:600;color:var(--mxe-sub)}
.mxe-mmeta .mxe-gem{width:15px;height:15px}
.mxe-macts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.mxe-mbtn{min-height:40px;padding:0 16px;background:var(--mxe-cta);color:#fff;box-shadow:0 8px 18px -8px var(--mxe-accent),inset 0 1px 0 #ffffff70}
.mxe-mbtn .mxe-gem{width:18px;height:18px}
.mxe-mghost{min-height:40px;padding:0 14px;background:#ffffffa6;color:var(--mxe-sub);border:1.5px solid var(--mxe-faint)}
.mxe-mdone{margin:0;font-weight:800;font-size:14px;color:#0d6b43}
.mxe-mlink{font-size:13px;font-weight:700;color:var(--mxe-ink)}

/* next unlock / trial strip */
.mxe-strip{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:center;padding:12px;color:inherit;text-decoration:none;transition:transform .16s ease-out}
.mxe-strip:hover{transform:translateY(-1px)}
.mxe-strip:active{transform:scale(.985)}
.mxe-strip:focus-visible,.mxe-locker:focus-visible,.mxe-btn:focus-visible,.mxe-linkbtn:focus-visible{outline:3px solid var(--mxe-accent);outline-offset:2px}
.mxe-thumb{position:relative;display:block;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,#5b4bd8,#1b1650);box-shadow:inset 0 0 0 1.5px #ffffff80,0 6px 14px -8px #0008}
.mxe[data-theme=rail] .mxe-thumb{background:radial-gradient(120% 90% at 30% 20%,#ffb36b,#e0563a)}
.mxe[data-theme=rally] .mxe-thumb{background:radial-gradient(120% 90% at 30% 20%,#3fd0c7,#1d6f8a)}
.mxe-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mxe-noart img{display:none}
.mxe-noart::after{content:attr(data-slot);position:absolute;inset:auto 0 8px;text-align:center;color:#ffffffd9;font:800 10px/1 var(--mxe-font);letter-spacing:.14em;text-transform:uppercase}
.mxe-sbody{display:grid;gap:5px;min-width:0}
.mxe-kicker{font-weight:800;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mxe-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mxe-trial .mxe-kicker{letter-spacing:.04em;text-transform:none;font-size:15px;color:var(--mxe-ink)}
.mxe-bar{display:block;height:12px;border-radius:999px;background:var(--mxe-track);overflow:hidden;box-shadow:inset 0 1px 2px #0002}
.mxe-bar i{display:block;height:100%;border-radius:inherit;background:var(--mxe-bar);transform-origin:left;transform:scaleX(var(--to));box-shadow:inset 0 1px 0 #ffffff80}
.mxe-count{display:flex;align-items:center;gap:4px;font-size:19px}
.mxe-count .mxe-gem{width:20px;height:20px}
.mxe-of{font-weight:800;color:var(--mxe-ink)}
.mxe-meta{font-size:13.5px;color:var(--mxe-sub);display:flex;flex-wrap:wrap;align-items:center;gap:1px 5px}
.mxe-meta>span{white-space:nowrap}
.mxe-meta .mxe-amt{font-size:14px;color:var(--mxe-ink)}
.mxe-cta{justify-self:start;display:inline-flex;align-items:center;gap:4px;margin-top:2px;padding:6px 12px;border-radius:999px;background:var(--mxe-cta);color:#fff;font-weight:800;font-size:14px;box-shadow:0 6px 14px -6px var(--mxe-accent),inset 0 1px 0 #ffffff70}

/* notes, guest, failure */
.mxe-note{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:9px 14px;font-size:14px;font-weight:600;color:var(--mxe-sub);border-radius:16px}
.mxe-cap{color:var(--mxe-ink)}
.mxe-note .mxe-amt{display:inline-flex;vertical-align:-.15em;color:var(--mxe-ink)}
.mxe-fail{color:#8a1d2a;background:#fff1f2eb}
.mxe-guest{padding:12px 14px;display:grid;gap:9px;font-size:14px}
.mxe-guest p{margin:0}
.mxe-guest .mxe-amt{font-size:14px}
.mxe-gtitle{font-weight:800;font-size:16px}
.mxe-done{color:#0d5b3a}
.mxe-agree{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--mxe-sub)}
.mxe-agree input{margin-top:2px;width:18px;height:18px;accent-color:var(--mxe-accent);flex:none}
.mxe-agree a{color:inherit}
.mxe-form{display:grid;gap:6px}
.mxe-form label{font-size:13px;color:var(--mxe-sub)}
.mxe-row{display:flex;gap:8px}
.mxe-row input{flex:1;min-width:0;height:42px;padding:0 12px;border-radius:12px;border:1.5px solid var(--mxe-faint);background:#fff;color:var(--mxe-ink);font:600 16px var(--mxe-font)}
.mxe-err{margin:0;min-height:0;color:#b4232f;font-size:13px;font-weight:600}
.mxe-err:empty{display:none}
.mxe-btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px;font:800 15px var(--mxe-font);transition:transform .14s ease-out,filter .14s}
.mxe-btn:active{transform:scale(.97)}
.mxe-btn:disabled{opacity:.6;cursor:default}
.mxe-solid{background:var(--mxe-ink);color:#fff;justify-self:start}
.mxe-google{background:#fff;color:#1f1f1f;border:1.5px solid var(--mxe-faint);width:100%}
.mxe-google svg{width:18px;height:18px}
.mxe-retry{min-height:34px;padding:0 14px;background:#8a1d2a;color:#fff;font-size:14px}
.mxe-linkbtn{justify-self:start;background:none;border:0;padding:0;color:var(--mxe-sub);font:600 13px var(--mxe-font);text-decoration:underline;cursor:pointer}
.mxe-locker{justify-self:center;font-family:var(--mxe-font);display:inline-flex;align-items:center;gap:7px;padding:4px 6px;color:var(--mxe-ink);font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.mxe-locker svg{width:20px;height:20px;color:var(--mxe-accent)}
/* inside a game's own (often dark) results screen the link needs its own frosted pill */
.mxe-inline .mxe-locker{padding:8px 16px 8px 12px;border-radius:999px;background:var(--mxe-tile);border:1.5px solid var(--mxe-edge);text-decoration:none;box-shadow:0 8px 20px -14px #0008}

/* narrow results screens (portrait phones) */
@container (max-width:380px){
 .mxe-earn{padding:10px 12px 10px 10px;gap:2px 10px}
 .mxe-coin{width:44px;height:44px}
 .mxe-line{column-gap:8px}
 .mxe-num{font-size:30px}
 .mxe-strip{grid-template-columns:88px 1fr;gap:10px;padding:10px}
}

/* roomy results screens (desktop overlay): the concept's proportions */
@container (min-width:520px){
 .mxe{gap:12px}
 .mxe-earn{padding:14px 20px 14px 14px;gap:16px;min-height:96px}
 .mxe-coin{width:70px;height:70px}
 .mxe-num{font-size:48px}
 .mxe-wallet{font-size:15px}
 .mxe-strip{grid-template-columns:150px 1fr;gap:16px;padding:14px 16px}
 .mxe-kicker{font-size:12px}.mxe-bar{height:16px}.mxe-count{font-size:22px}.mxe-meta{font-size:15px}
}

/* ---- the counter sequence (round 2; one shot, on the first render with a receipt). Beats come from motions-earnings.js
   beats() as --t-* variables. .mxe-still = reduced motion: no motion at all, the final state shows. ---- */
.mxe-anim .mxe-coin>img{animation:mxe-pop .44s cubic-bezier(.2,.9,.25,1.2) both}
.mxe-anim .mxe-burst b{animation:mxe-spark .62s cubic-bezier(.15,.8,.3,1) .12s both}
.mxe-burst b:nth-child(1){--x:-34px;--y:-20px}.mxe-burst b:nth-child(2){--x:-8px;--y:-38px}.mxe-burst b:nth-child(3){--x:26px;--y:-30px}
.mxe-burst b:nth-child(4){--x:38px;--y:2px}.mxe-burst b:nth-child(5){--x:20px;--y:32px}.mxe-burst b:nth-child(6){--x:-30px;--y:24px}
.mxe-anim .mxe-open--bonus{animation:mxe-open .32s cubic-bezier(.2,.8,.2,1) var(--t-bonus,.9s) both}
.mxe-anim .mxe-open--moment{animation:mxe-open .4s cubic-bezier(.2,.8,.2,1) var(--t-moment,2s) both}
.mxe-anim .mxe-bonuses{animation:mxe-fade .2s ease-out var(--t-bonus,.9s) both}
.mxe-anim .mxe-bonuses li{animation:mxe-bpop .36s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--t-bonus,.9s) + var(--k) * 320ms)}
.mxe-anim .mxe-wallet{animation:mxe-fade .3s ease-out calc(var(--t-fly,.8s) - 200ms) both}
.mxe-anim .mxe-bar i{animation:mxe-fill .9s cubic-bezier(.2,.8,.2,1) var(--t-bar,.8s) both}
.mxe-anim .mxe-moment{animation:mxe-moment .6s cubic-bezier(.34,1.56,.64,1) var(--t-moment,2s) both}
.mxe-anim .mxe-moment .mxe-rays{animation:mxe-spin 6s linear var(--t-moment,2s) both}
[data-state=pending] .mxe-skel{animation:mxe-breathe 1.1s ease-in-out infinite alternate}
@keyframes mxe-pop{0%{transform:scale(.4) rotate(-24deg);opacity:0}65%{transform:scale(1.1) rotate(6deg);opacity:1}100%{transform:none}}
@keyframes mxe-spark{0%{opacity:0;transform:translate(0,0) rotate(45deg) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(45deg) scale(.9)}}
@keyframes mxe-in{from{opacity:0;transform:translateX(-10px)}}
@keyframes mxe-fade{from{opacity:0}}
@keyframes mxe-bpop{0%{opacity:0;transform:translateY(8px) scale(.9)}}
@keyframes mxe-fill{from{transform:scaleX(var(--from))}}
@keyframes mxe-open{from{grid-template-rows:0fr}}
@keyframes mxe-moment{0%{opacity:0;transform:scale(.7) rotate(-2deg)}}
@keyframes mxe-spin{to{rotate:360deg}}
@keyframes mxe-breathe{to{opacity:.45}}
.mxe-still *,.mxe-still *::before{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.mxe *,.mxe-overlay *{animation:none!important;transition:none!important}}

/* ---- standalone overlay ---- */
.mxe-overlay{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
 background:radial-gradient(120% 90% at 50% 40%,transparent 30%,var(--mxe-veil) 100%),var(--mxe-veil);color:var(--mxe-ink);font:15px/1.35 var(--mxe-font);animation:mxe-fade .22s ease-out both}
.mxe-overlay *,.mxe-overlay *::before,.mxe-overlay *::after{box-sizing:border-box}
.mxe-card{position:relative;display:grid;justify-items:center;gap:10px;width:min(460px,100%);max-height:calc(100svh - 28px);overflow:auto;scrollbar-width:none;padding:26px 22px 18px;border-radius:34px;background:var(--mxe-glass);
 -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);border:1.5px solid var(--mxe-edge);box-shadow:inset 0 1px 0 #ffffffd0,inset 0 0 40px #ffffff30,0 30px 90px -20px #0a0a2a80;
 animation:mxe-rise .32s cubic-bezier(.2,.9,.25,1.1) both}
.mxe-card::-webkit-scrollbar{display:none}
.mxe-card .mxe{margin:4px 0 0;--mxe-tile:#ffffff8c}
.mxe-title{margin:0;font-weight:900;font-style:italic;font-size:clamp(34px,9vw,46px);line-height:.95;letter-spacing:-.035em;text-transform:uppercase;text-align:center}
.mxe-score{margin:0;font-weight:900;font-style:italic;font-size:clamp(72px,22vw,104px);line-height:.9;letter-spacing:-.04em;color:#fff;-webkit-text-stroke:3px var(--mxe-ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--mxe-ink),0 14px 26px #2a1b8a55;font-variant-numeric:tabular-nums;padding:0 .08em}
.mxe-pb{margin:0;display:inline-flex;align-items:center;gap:8px;padding:7px 18px;border-radius:999px;background:linear-gradient(180deg,#ffe57a,#ffc21a);color:#3a2600;font-weight:900;font-size:18px;box-shadow:0 6px 16px -6px #d99a00,inset 0 1px 0 #fff8}
.mxe-pb svg{width:22px;height:22px}
.mxe-pb[hidden]{display:none}
.mxe-post{width:100%;min-height:56px;font-size:21px;background:var(--mxe-cta);color:#fff;box-shadow:0 10px 24px -10px var(--mxe-accent),inset 0 1px 0 #ffffff70}
.mxe-again{min-width:min(240px,100%);min-height:48px;background:#fff;color:var(--mxe-ink);font-size:18px;box-shadow:0 6px 16px -10px #0006}
.mxe-act{width:100%;min-height:46px;background:#ffffffa8;color:var(--mxe-ink);font-size:17px;border:1.5px solid var(--mxe-edge);box-shadow:0 6px 16px -12px #0006}
.mxe-act[hidden]{display:none}
@media (min-width:900px) and (min-height:860px){
 .mxe-card{width:min(600px,100%);padding:34px 32px 24px;gap:12px}
 .mxe-card .mxe{max-width:none}
 .mxe-title{font-size:60px}.mxe-score{font-size:132px}.mxe-pb{font-size:22px;padding:9px 24px}
 .mxe-post{min-height:66px;font-size:26px}.mxe-again{min-height:54px;font-size:20px;min-width:280px}.mxe-act{min-height:52px;font-size:19px}
}
@keyframes mxe-rise{from{opacity:0;transform:translateY(14px) scale(.96)}}
/* short landscape screens (desktops with a docked browser, phones on their side) */
@media (max-height:640px) and (orientation:landscape){
 .mxe-card{width:min(760px,100%);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;column-gap:20px;padding:20px 22px}
 .mxe-card>.mxe-title,.mxe-card>.mxe-score,.mxe-card>.mxe-pb{grid-column:1}
 .mxe-card>.mxe{grid-column:2;grid-row:1/span 4;margin:0}
 .mxe-card>.mxe-post,.mxe-card>.mxe-act,.mxe-card>.mxe-again{grid-column:1}
 .mxe-score{font-size:clamp(56px,14vh,88px)}
}