/* ================= WRAPPER ================= */

.uug-target-wrapper{
    max-width:420px;
    margin:40px auto;
    padding:24px;
    border-radius:18px;
    background:#ffffff;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    text-align:center;
}


/* ================= FIELD ================= */

.uug-target-field{
    background:linear-gradient(180deg,#2e8b57,#1f6f45);
    position:relative;
    height:260px;
    border-radius:18px;
    overflow:hidden;
}


/* ================= BALLOONS ================= */

.uug-balloons{
    position:absolute;
    top:40px;
    left:50%;
    transform:translateX(-50%);
    width:80%;
    display:flex;
    justify-content:space-between;
}

.uug-balloon{
    width:50px;
    height:65px;
    border-radius:50% 50% 45% 45%;
    position:relative;
}

.uug-balloon::after{
    content:"";
    position:absolute;
    bottom:-20px;
    left:50%;
    transform:translateX(-50%);
    width:2px;
    height:22px;
    background:#555;
}

.uug-balloon-left  { background:#ef4444; }
.uug-balloon-mid   { background:#3b82f6; }
.uug-balloon-right { background:#f59e0b; }


/* ===== Independent Movement ===== */

@keyframes balloonMoveLeft {
    0%   { transform: translateX(-18px); }
    50%  { transform: translateX(18px); }
    100% { transform: translateX(-18px); }
}

@keyframes balloonMoveRight {
    0%   { transform: translateX(18px); }
    50%  { transform: translateX(-18px); }
    100% { transform: translateX(18px); }
}

.uug-balloon-left  { animation: balloonMoveLeft 1.2s infinite ease-in-out; }
.uug-balloon-mid   { animation: balloonMoveRight 1.6s infinite ease-in-out; }
.uug-balloon-right { animation: balloonMoveLeft 1.4s infinite ease-in-out; }


/* ===== POP ===== */

@keyframes balloonPop {
0%   { transform: scale(1) rotate(0deg); opacity:1; }
60%  { transform: scale(1.4) rotate(10deg); opacity:.7; }
100% { transform: scale(0) rotate(20deg); opacity:0; }
}




/* ================= ARCHER SYSTEM ================= */

.uug-archer{
    position:absolute;
    bottom:15px;
    left:50%;
}


/* ===== CURVED BOW ===== */

.uug-bow-curve{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:60px;
    height:120px;
    border-left:10px solid #8b4513;
    border-right:10px solid #8b4513;
    border-radius:60px;
}


/* ===== BOW STRING ===== */

.uug-bow-string{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:2px;
    height:120px;
    background:#facc15;
}


/* ===== ARROW (CORRECT SIZE) ===== */

.uug-arrow{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* Arrow head */
.uug-arrow-head{
    width:0;
    height:0;
    border-left:8px solid transparent;
    border-right:8px solid transparent;
    border-bottom:16px solid #444;
}

/* Arrow shaft */
.uug-arrow-shaft{
    width:4px;
    height:45px;
    background:#a0522d;
}

/* Arrow feathers */
.uug-arrow-feathers{
    width:14px;
    height:10px;
    background:#dc2626;
    border-radius:3px;
    margin-top:3px;
}


/* Glow when fired */
.uug-arrow.fire{
    filter:drop-shadow(0 0 10px rgba(255,120,0,.9));
}


/* ================= POWER BAR ================= */

.uug-power-bar{
    width:100%;
    margin:18px 0 10px;
}

.uug-power-label{
    font-weight:800;
    font-size:14px;
    color:#111;
    margin-bottom:6px;
    letter-spacing:.5px;
}

.uug-power-track{
    width:100%;
    height:16px;
    background:#111;
    border-radius:999px;
    overflow:hidden;
    box-shadow:inset 0 2px 6px rgba(0,0,0,.4);
}

.uug-power-fill{
    width:0%;
    height:100%;
    background:linear-gradient(90deg,#22c55e,#facc15,#ef4444);
    box-shadow:0 0 10px rgba(255,80,0,.7);
    transition:width .05s linear;
}

@keyframes uugPowerPulse{
    0%   { filter:brightness(1); }
    50%  { filter:brightness(1.4); }
    100% { filter:brightness(1); }
}

.uug-power-glow{
    animation:uugPowerPulse .6s infinite;
}


/* ================= BUTTON ================= */

.uug-kick-btn{
    background:#7a003c;
    color:#fff;
    border:none;
    padding:12px 26px;
    border-radius:12px;
    font-weight:700;
    cursor:pointer;
    transition:.2s ease;
}

.uug-kick-btn:hover{
    background:#5c002d;
}

.uug-kick-btn:disabled{
    opacity:.5;
    cursor:not-allowed;
    transform:scale(.97);
}


/* ================= RESULT BANNER ================= */

.uug-green-banner{
    background:linear-gradient(135deg,#16a34a,#22c55e);
    color:#fff;
    padding:14px 18px;
    border-radius:12px;
    margin-bottom:14px;
    box-shadow:0 8px 18px rgba(0,0,0,.15);
    text-align:center;
}

.uug-result-text{
    font-size:16px;
    font-weight:700;
}

.uug-cooldown-text{
    font-size:15px;
    font-weight:600;
    margin-top:4px;
}


/* ================= REPLAY OVERLAY ================= */

#uug-replay-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.2);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

#uug-replay-overlay.hidden{
    display:none;
}

.uug-replay-box{
    background:linear-gradient(135deg,#16a34a,#22c55e);
    padding:24px 28px;
    border-radius:16px;
    text-align:center;
    color:#fff;
    box-shadow:0 20px 40px rgba(0,0,0,.25);
    max-width:320px;
    width:90%;
}

.uug-replay-title{
    font-size:18px;
    font-weight:800;
    margin-bottom:14px;
}

.uug-replay-actions{
    display:flex;
    gap:14px;
    justify-content:center;
}

.uug-btn-replay,
.uug-btn-other{
    flex:1;
    padding:10px 18px;
    border-radius:10px;
    font-weight:700;
    cursor:pointer;
    border:none;
}

.uug-btn-replay{ background:#fde047; color:#000; }
.uug-btn-other{ background:#0ea5e9; color:#fff; }


@media (max-width:480px){
    .uug-replay-actions{
        flex-direction:column;
        gap:10px;
    }
}



@keyframes balloonFlash {
0% { filter:brightness(1); }
50% { filter:brightness(2); }
100% { filter:brightness(1); }
}

.uug-balloon.pop{
animation:
balloonPop .4s ease forwards,
balloonFlash .2s ease;
}



/* ================= BALLOON PARTICLES ================= */

.uug-balloon-fragment{
position:absolute;
width:14px;
height:10px;
border-radius:4px 6px 3px 5px;
pointer-events:none;
opacity:1;
animation: balloonFragment 5s cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes balloonFragment{

0%{
transform:translate(0,0) rotate(0deg) scale(1);
opacity:1;
}

60%{
opacity:1;
}

100%{
transform:translate(var(--x), var(--y)) rotate(var(--r)) scale(.7);
opacity:.85;
}

}


/* ================================
   TARGET RESULT OVERLAY
================================ */

.uug-target-result{
    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.55);
    backdrop-filter:blur(2px);

    z-index:20;
}

.uug-target-result-inner{
    text-align:center;
}

.uug-target-result-points{
    font-size:44px;
    font-weight:900;
    color:#fde047;
}

.uug-target-result-text{
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    color:#ffffff;
}