/* Shared manabis medal cut-in. manabis / member / MOANAVI SYSTEM use this file. */
.medal-overlay,
.member-medal-overlay,
.daily-medal-overlay{
    position:fixed;
    inset:0;
    z-index:2000;
    display:none;
    place-items:center;
    border:0;
    background:rgba(10,16,31,.75);
}
.medal-overlay.show,
.medal-overlay.is-visible,
.member-medal-overlay.show,
.daily-medal-overlay.show{display:grid}

.medal-celebration,
.member-medal-celebration,
.daily-medal-celebration{
    position:relative;
    display:grid;
    place-items:center;
    gap:15px;
}
.medal-reason,
.member-medal-reason,
.daily-medal-reason{
    color:#fff;
    font-size:clamp(25px,5vw,40px);
    line-height:1.1;
    font-weight:950;
    letter-spacing:.05em;
    text-align:center;
    text-shadow:0 3px 14px rgba(0,0,0,.32);
}
.medal-coin,
.member-medal-coin,
.daily-medal-coin{
    width:180px;
    height:180px;
    object-fit:contain;
    filter:drop-shadow(0 12px 22px rgba(255,190,0,.35));
    animation:manabis-shared-medal-pop 1.05s cubic-bezier(.2,.85,.25,1.15) both;
}
.medal-confirm,
.member-medal-confirm,
.daily-medal-confirm{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:150px;
    min-height:48px;
    padding:10px 22px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:14px;
    background:rgba(255,255,255,.15);
    color:#fff;
    font:inherit;
    font-size:15px;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.medal-spark,
.member-medal-spark,
.daily-medal-spark{position:absolute;color:#ffd84d;font-size:32px}
.medal-spark.s1,.member-medal-spark.s1,.daily-medal-spark.s1{left:-44px;top:14px}
.medal-spark.s2,.member-medal-spark.s2,.daily-medal-spark.s2{right:-44px;top:30px}
.medal-spark.s3,.member-medal-spark.s3,.daily-medal-spark.s3{left:-32px;top:120px}
.medal-spark.s4,.member-medal-spark.s4,.daily-medal-spark.s4{right:-32px;top:126px}

@keyframes manabis-shared-medal-pop{
    0%{transform:scale(.35) rotate(-14deg);opacity:0;filter:drop-shadow(0 0 0 rgba(255,220,60,0)) brightness(.8)}
    55%{transform:scale(1.14) rotate(7deg);opacity:1;filter:drop-shadow(0 0 34px rgba(255,220,60,.9)) brightness(1.18)}
    100%{transform:scale(1) rotate(0);filter:drop-shadow(0 12px 22px rgba(255,190,0,.35)) brightness(1)}
}