body {
    margin: 0; padding: 0; background-color: #0a1733;
    display: flex; justify-content: center; align-items: center;
    height: 100vh; overflow: hidden; font-family: 'Segoe UI', sans-serif;
}

#mobile-container {
    width: 100%; max-width: 420px; aspect-ratio: 9 / 16; max-height: 100vh; min-height: 100vh;
    position: relative; overflow: hidden;
    box-shadow: 0 0 50px rgba(0,0,0,0.4);
    background-image: url('images/bg.jpg');
    background-size: cover; background-position: center;
}

/* --- HEADER LOGO --- */
#logo {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    width: 150px; z-index: 200; pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

#drag-restriction-zone {
    position: absolute; top: 55%; left: 50%; transform: translateX(-50%);
    width: 78%; height: 21%; border: 2px dashed rgba(255, 255, 255, 0);
    border-radius: 50px; pointer-events: none; z-index: 2;
}

#mute-btn {
    position: absolute; top: 18px; right: 16px;
    z-index: 300; background: rgba(0,0,0,0.5);
    border: none; color: white; width: 40px; height: 40px;
    border-radius: 50%; cursor: pointer; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
}

/* --- GOALKEEPER --- */
#goalkeeper {
    width: 72px; height: 96px;
    position: absolute; top: 120px; left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    background-size: contain; background-repeat: no-repeat;
    background-position: bottom center;
    background-image: url('images/keeper.png');
    transition: left 0.3s ease-out, transform 0.1s;
}

.keeper-idle { animation: idleMove 3s ease-in-out infinite; }
#goalkeeper.keeper-dash { width: 130px; height: 84px; background-image: url('images/keeper-dash.png') !important; animation: none !important; }
#goalkeeper.keeper-block { width: 96px; background-image: url('images/keeper-block.png') !important; animation: none !important; }

@keyframes idleMove {
    0%, 100% { transform: translateX(-120%); }
    50% { transform: translateX(20%); }
}

/* --- BALL --- */
#ball {
    width: 52px; height: 52px;
    background-image: url('images/ball.png');
    background-size: contain; background-position: center; background-repeat: no-repeat;
    position: absolute; top: calc(65.5% - 26px); left: 50%;
    transform: translateX(-50%);
    z-index: 100; cursor: grab; touch-action: none;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
}

.ball-bounce { animation: idleBounce 1.5s ease-in-out infinite; }
@keyframes idleBounce {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.1); }
}

.spinning { animation: spin 0.6s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* --- INTRO OVERLAY --- */
#overlay {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: rgba(8, 18, 48, 0.92); z-index: 400; cursor: pointer; padding: 20px;
    box-sizing: border-box;
}
#welcome-img { width: 90%; max-width: 340px; margin-top:-50px;}
.gif-btn {
    width: 200px; cursor: pointer; margin-top: -80px !important;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4));
    transition: transform 0.15s;
}
.gif-btn:active { transform: scale(0.95); }

/* --- RESULT POPUP --- */
#status-popup {
    position: absolute; width: 100%; height: 100%; top: 0; left: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 500; transform: scale(0); transition: 0.4s; pointer-events: none;
}
#status-popup.active { transform: scale(1); pointer-events: all; }
#popup-card { width: 86%; max-width: 360px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
#popup-btn { margin-top: 18px; }

/* --- CONFETTI --- */
#confetti { position: absolute; inset: 0; z-index: 450; pointer-events: none; display: none; }
#confetti.show { display: block; }
#confetti img { position: absolute; top: -120px; width: 60px; animation: fall 2.2s linear infinite; }
#confetti img:nth-child(1) { left: 12%; animation-delay: 0s; }
#confetti img:nth-child(2) { left: 45%; animation-delay: 0.4s; width: 48px; }
#confetti img:nth-child(3) { left: 75%; animation-delay: 0.2s; }
#confetti img:nth-child(4) { left: 90%; animation-delay: 0.6s;}
@keyframes fall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(720px) rotate(220deg); opacity: 0.9; }
}