<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arcade Prince Robot</title>

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.svg-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

@keyframes glow {
    0%, 100% {
        filter: drop-shadow(0 0 15px rgba(255,215,0,0.5));
    }

    50% {
        filter: drop-shadow(0 0 30px rgba(255,215,0,0.8));
    }
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

svg {
    width: 260px;
    height: 260px;
}
</style>
</head>

<body>

<div class="svg-container">
    <svg viewBox="0 0 100 100" class="animate-glow" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Arcade Prince Robot">
        <polygon points="50,20 30,35 35,35 35,45 65,45 65,35 70,35" fill="#FFD700" stroke="#FFA500" stroke-width="2"/>
        <rect x="30" y="45" width="40" height="30" rx="5" fill="#0a0a0a" stroke="#ff00ff" stroke-width="3"/>
        <rect x="35" y="55" width="30" height="12" fill="#ff00ff" opacity="0.8"/>
        <rect x="35" y="58" width="30" height="3" fill="#FFD700"/>
        <rect x="35" y="80" width="30" height="25" rx="5" fill="#4B0082" stroke="#FFD700" stroke-width="2"/>
        <circle cx="50" cy="85" r="8" fill="#FFD700" stroke="#FFA500"/>
        <line x1="50" y1="85" x2="50" y2="65" stroke="#E5E4E2" stroke-width="4"/>
        <circle cx="50" cy="62" r="5" fill="#DC143C" stroke="#FFD700"/>
        <circle cx="60" cy="95" r="3" fill="#50C878" stroke="#FFD700"/>
        <circle cx="65" cy="90" r="3" fill="#0F52BA" stroke="#FFD700"/>
    </svg>
</div>

</body>
</html>