/* reward-wrapper */
.reward-wrapper{
position:absolute;
top:180px;
left:22px;
z-index:9999;
}

.reward-circle{
position:relative;
width:78px;
height:78px;
}

.progress-ring{
position:absolute;
top:0;
left:0;
width:78px;
height:78px;
transform:rotate(-90deg);
overflow:visible;
}

.progress-bg{
fill:none;
stroke:rgba(255,255,255,.10);
stroke-width:6;
}

.progress-bar{
fill:none;
stroke:#ffcc00;
stroke-width:6;
stroke-linecap:round;
stroke-dasharray:226;
stroke-dashoffset:226;
transition:stroke-dashoffset 1s linear;
}

.coin-center{
position:absolute;
top:50%;
left:50%;
width:57px;
height:57px;
transform:translate(-50%,-50%);
border-radius:50%;
background:linear-gradient(145deg,#ffd84f,#ffb300);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
box-shadow:0 0 12px rgba(255,204,0,.35);
animation:coinPulse 2s infinite;
}

.coin-count{
font-size:20px;
font-weight:600;
line-height:1;
color:#000;
}

.coin-text{
font-size:6px;
font-weight:700;
line-height:1;
margin-top:2px;
letter-spacing:.4px;
text-transform:uppercase;
color:#000;
}

.reward-toast{
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:#ffcc00;
color:#000;
padding:12px 22px;
border-radius:12px;
font-size:24px;
font-weight:700;
z-index:999999999;
box-shadow:0 0 25px rgba(255,204,0,.5);
animation:rewardFade .3s ease;
pointer-events:none;
}

@keyframes rewardFade{
from{
opacity:0;
transform:translate(-50%,-40%);
}
to{
opacity:1;
transform:translate(-50%,-50%);
}
}

@keyframes coinPulse{
0%{
transform:translate(-50%,-50%) scale(1);
}
50%{
transform:translate(-50%,-50%) scale(1.04);
}
100%{
transform:translate(-50%,-50%) scale(1);
}
}

/* Coin Magic */
.rewardBoxWrap{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.05);
    box-shadow:
        0 0 25px rgba(0,140,255,.08),
        inset 0 0 30px rgba(255,255,255,.02);
}

/* AREA EFFECT */
.coinMagic{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:9;
}

/* MAGIC GLOW */
.magicCoin{
    position:absolute;
    bottom:-40px;
    width:26px;
    height:26px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;

    background:
        radial-gradient(circle at 30% 30%,
        #fff8b0 0%,
        #ffd900 35%,
        #ffae00 70%,
        #ff8400 100%);

    box-shadow:
        0 0 5px #ffd900,
        0 0 10px #ffcc00,
        0 0 18px rgba(255,217,0,.9),
        0 0 30px rgba(255,174,0,.7),
        0 0 45px rgba(255,140,0,.5);

    animation:coinFly linear forwards;
    transform-style:preserve-3d;
}

/* INNER LIGHT */
.magicCoin::before{
    content:'';
    position:absolute;
    inset:-8px;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(255,255,180,.8) 0%,
        rgba(255,217,0,.4) 35%,
        transparent 75%);
    animation:pulseGlow 1s infinite alternate;
}

/* SPARK */
.magicCoin::after{
    content:'✦';
    position:absolute;
    color:#fff7c2;
    font-size:10px;
    top:-6px;
    right:-3px;
    text-shadow:
        0 0 8px #fff,
        0 0 14px #ffd900;
    animation:sparkle .8s infinite alternate;
}

/* FLOAT COIN */
@keyframes coinFly{

    0%{
        transform:
            translateY(0)
            scale(.3)
            rotate(0deg);
        opacity:0;
    }

    10%{
        opacity:1;
    }

    100%{
        transform:
            translateY(-240px)
            translateX(calc(-40px + 80px * var(--rand)))
            scale(1.15)
            rotate(360deg);
        opacity:0;
    }
}

/* GLOW */
@keyframes pulseGlow{
    from{
        transform:scale(.8);
        opacity:.4;
    }
    to{
        transform:scale(1.3);
        opacity:1;
    }
}

/* SPARK */
@keyframes sparkle{
    from{
        transform:scale(.8) rotate(0deg);
        opacity:.5;
    }
    to{
        transform:scale(1.4) rotate(25deg);
        opacity:1;
    }
}


/* recorder-box */
.recorder-box{
    position:relative;
    overflow:hidden;
    border-radius:12px;
}

.recorder-lock-overlay{
    display:none;
    position:absolute;
    inset:0;
    z-index:9999;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    align-items:center;
    justify-content:center;
    padding:0 20px 45px;
    box-sizing:border-box;
}

.recorder-lock-overlay.is-locked{
    display:flex;
}

.recorder-lock-content{
    width:100%;
    max-width:340px;
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.recorder-lock-content h3{
    color:#fff;
}

.recorder-lock-content p{
    color:rgba(255,255,255,.75);
    font-size:13px;
    line-height:1.6;
    margin:0;
}

.desct_lock{
    margin-top:0px;
}

.btn_recording{
    margin:auto;
    text-align:center;
    padding:0 0 15px;
}

.recorder-box.locked-mode .recorder-content > *{
    visibility:hidden;
    opacity:0;
    pointer-events:none;
}

.recorder-lock-overlay{
    display:none;
    position:absolute;
    inset:0;
    z-index:99999;
    background:rgba(5,10,25,.45);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    align-items:center;
    justify-content:center;
    padding:24px;
    box-sizing:border-box;
}

.recorder-lock-overlay.is-locked{
    display:flex !important;
}

.recorder-lock-content{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
}
.getreward_note {
    font-size: 20px;
    color: #fff;
}
.icon-rewards {
    font-size: 20px;
    background: #FF9800;
    padding: 8px;
    border-radius: 50%;
    color: #fff;
}

.btn_recor_nustm {
  background-image: linear-gradient(to right, #FF512F 0%, #F09819 51%, #FF512F 100%);
}

.btn_recor_nustm {
  margin: 10px;
  padding: 10px 40px 10px;
  border-radius: 100px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  display: block;
  outline: none;
  border: none;
  width:100%;
}

.btn_recor_nustm:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}
.record-coin-alert{
width:100%;
}

.record-coin-alert .alert{
font-size:13px;
border-radius:10px;
padding:10px 14px;
}